Fonts, licenses and specimens
On this page
There are two places to choose a typeface. The manual's settings decide what your published page is set in. The Typography block documents your brand typefaces, with a specimen and a license line for each. Both use the same picker, and both take a font you upload.
The font the page is set in
WhereDashboard, Brand manual, Settings, Typography
The Typography card holds Heading font and Body font. Each is a picker: search the Google list, choose one of your uploaded families, or leave it on Default to keep the template's typeface. A chosen heading font replaces the template's heading typeface, and a chosen body font replaces the rest. Changing them needs manual:write, which reads edit sections and content in the role editor.
This card is a paid one
The picker inside the Typography block is not locked. Documenting a typeface, uploading its file and showing a specimen work on every plan. See Design controls for the rest of the manual's settings.
Choosing a Google font
Each picker offers a search box, an Upload button, Default, then two groups: Your fonts and Google fonts. The Google list shows 60 families at a time, so use the search box to reach the rest. Only the family name is stored.
If the Google group is empty
Uploading your own
- Open the Heading font, Body font or Typeface picker and press Upload.
- Choose the file. Accepted:
.woff2(smallest, use it where you have a choice),.woff,.ttfand.otf(both large desktop formats), or anything the browser reports as a font. A font inside a zip has to be unpacked first. - The file lands in the asset library under the Fonts category and is selected in the field you were in. It appears under Your fonts in every picker from then on, in the brand it was uploaded to.
Uploading needs asset:write, which reads upload files, and rename, edit, duplicate and refile them. A member who may edit the manual but not the library can still pick a Google family or an already uploaded one. Font files added through the asset library work the same way.
The file name becomes the family name
Acme-Display.woff2 is offered as Acme-Display. Rename the file before you upload it if that is not the name you want in the manual, in the picker and in the exported tokens. Uploading a second file with the same family name shows only the newest one.There is no size cap for a font file. What limits it is the brand's storage quota: 512 MB on Free, 25 GB on Pro and 250 GB on Business. It counts the library, the versions kept when a file is replaced, and anything still in the trash. When it is full the picker says That font did not upload. Check the file, and if it keeps happening the storage settings. and the asset library says Storage limit reached. Upgrade your plan for more space. See The trash, storage and the quota.
The Typography block, field by field
The block takes one entry per typeface, in the order you want them read. An entry appears on the page as soon as it has a typeface, a usage or a sample. Blank fields fall back to the values below.
Headings, Body, Numerals. Printed above the specimen, and used as the token name, so keep it short and stable.2.25rem.1.1.700. Blank means 700.em, for example -0.02em. Blank means none.system-ui, sans-serif. When you fill it in it is printed under the specimen as Fallback: for developers to copy.On the published page each entry gets a card: the usage, the weight, size, line height and tracking in small type, a Copy name button, then the specimen, the fallback and the license. Under the specimen is a field, Type your own text to try it. What a reader types replaces the sample in the same face, up to 200 characters. It is never saved, and it is left out of the printed page and the PDF.
Use one block with two entries for a brand with two faces, not two blocks. The completeness check warns as Secondary typeface when there is only one entry, and as Font fallback stack when no entry has a fallback stack. See Completeness and governance.
Recording the license
The License (optional) field prints on the published page as License: followed by what you wrote. Write either the name of an open license, such as SIL Open Font License 1.1, or the terms you bought, such as Desktop and web, 5 users, bought 2024.
A web license and a desktop license are different things
The asset library records License and Credit against the file itself, plus License ends on as a date. A file whose date has passed is marked The license for this file has ended. Check before using it again, and one within 60 days of its date is marked The license for this file ends soon. See Editing a file's details.
The modular type scale
The Type scale block turns one base size and one ratio into every size the brand uses. Change the ratio and every step follows.
rem or px for the exported sizes. rem is the default.Steps are named outwards from the base: md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl going up, and sm, xs, 2xs, 3xs going down. md is always the base itself.
The ratios, and what each one is for
| Ratio | Value | What it does |
|---|---|---|
| Major second | 1.125 | Tight, good for dense interfaces |
| Minor third | 1.2 | Calm, a safe default for web |
| Major third | 1.25 | Clear jumps, works for most brands |
| Perfect fourth | 1.333 | Editorial, strong headings |
| Augmented fourth | 1.414 | Dramatic, few steps needed |
| Perfect fifth | 1.5 | Poster like contrast |
| Golden ratio | 1.618 | Very large jumps, use sparingly |
Your own value is kept if one is already stored, and shown as Custom with its number. A larger ratio needs fewer steps.
What the scale computes
This is the block's default: a 16px base on the major third, with 5 steps up and 2 down.
| Step | Size | In rem | Line height | Tracking |
|---|---|---|---|---|
| 4xl | 48.8px | 3.052rem | 1.1 | -0.03em |
| 3xl | 39.1px | 2.441rem | 1.18 | -0.03em |
| 2xl | 31.3px | 1.953rem | 1.26 | -0.025em |
| xl | 25px | 1.563rem | 1.34 | -0.02em |
| lg | 20px | 1.25rem | 1.42 | -0.01em |
| md | 16px | 1rem | 1.5 | none |
| sm | 12.8px | 0.8rem | 1.53 | none |
| xs | 10.2px | 0.64rem | 1.56 | 0.01em |
You do not set line height or tracking per step. Both are computed, and both are printed beside every step on the published page as size / line height, with the tracking added when it is not zero.
Typography in the token export
The Typography block exports one font family token per entry that has a Typeface: the token name is the Used for value, lowercased and hyphenated, and the value is the family name. The Type scale block exports one size token per step, named md, lg and so on, with the line height and tracking in the formats that have somewhere to put them. On the export page (opens in a new tab) the two groups are offered on their own as Typography and Type scale, so a build can take the sizes without the colors.
Three rules worth knowing before you export
- Usage is the token name. Two entries whose Used for is blank both become
font, so the second is renamedfont-2. Fill the field in and the names are yours. - Every Typography block counts, wherever it is in the manual, and their fonts are collected in order.
- Only the first type scale counts. A second Type scale block is shown on the page but does not replace the first in the export.
The same tokens are served by the API for every published manual. The API page (opens in a new tab) shows the exact address. See Design tokens and the API documentation on tokens (opens in a new tab).
When a font does not appear
Still stuck? Write to hello@stylehub.cloud and say which page you were on.