The CI · Chapter 8
Type sizes
Many style guides list type sizes loosely. In nexbrand each step has a name, a use, a size, a weight, a font and a line height. nexbrand computes the start for you.
Computing sizes
In the editor, open the tab Sizes.
- Choose the base size
The slider Body text: 17 px runs from 14 to 21 px.
- Choose the ratio
How much each step grows, see the table below.
- Assign fonts
Under Headings and Body text, pick one font of the version each.
- Let it compute
Compute sizes creates the steps Heading 1 to 3, Lead, Body text and Small.
| Ratio | Effect |
|---|---|
| Major second, 1.125 | dense |
| Minor third, 1.2 | balanced |
| Major third, 1.25 | clear steps |
| Fourth, 1.333 | airy |
| Fifth, 1.5 | bold |
Steps one by one
Below the calculator, each step stands with its fields. You change them by hand or add a new one with Step.
| Field | Values |
|---|---|
| Name | free |
| For | Heading 1 to 4, Lead, Body text, Small, Caption, Label or unassigned |
| Size | 6 to 400 px |
| Weight | 100 to 1000 |
| Font | one font of the version |
| Line height | 0.5 to 4 |
A version holds at most twelve steps.
Where the sizes appear
In the tab Fonts, the section Type sizes stands below the fonts: each step with name, use, pixels, weight and line height, plus a text sample at exactly that size. In the code each step becomes --text-h1 in rem (16 px are 1 rem), with --text-h1--line-height and --text-h1--font-weight. The name comes from the use; without a use, from the step's name.
Rules can set sizes, such as “Lora for headings, at least 28 px”. That is in the chapter Rules.
Pavo saysThe checks report body text below 16 px. On a screen it tires the eyes, even when it looks fine in print.