Typography Custom Properties
Typography. These properties control fonts, font sizes, spacing, and other text-related values.
Font Size
The modular scale of fonts. This is a ten-step scale with 0 being the smallest font, 2 being the body font, and 9 being the largest. These values should be enough for any text need.
--fs-0
The smallest size in the scale. This is intended for rare uses where you need text, but it’s readability is not paramount.
- Type:
-
"<length>" - Value:
-
0.675rem
--fs-1
The second smallest size in the scale. This should be used frequently when smaller-than-body text is needed. This size should be readonable by most people on most screens, assuming proper contrast ratios
- Type:
-
"<length>" - Value:
-
0.875rem
--fs-2
The standard body font size. Any normal text should be set in this and it should always be 1rem so that it matches the browsers font size.
- Type:
-
"<length>" - Value:
-
1rem
--fs-3
The third step in the font size scale, slightly bigger than the body font.
- Type:
-
"<length>" - Value:
-
1.25rem
--fs-4
The fourth step in the font size scale, two steps larger than the body font.
- Type:
-
"<length>" - Value:
-
1.5rem
--fs-5
The fifth step in the font size scale, three steps larger than the body font.
- Type:
-
"<length>" - Value:
-
2.25rem
--fs-6
The sixth step in the font size scale, four steps larger than the body font.
- Type:
-
"<length>" - Value:
-
3rem
--fs-7
The seventh step in the font size scale, five steps larger than the body font.
- Type:
-
"<length>" - Value:
-
4.25rem
--fs-8
The eighth step in the font size scale, six steps larger than the body font.
- Type:
-
"<length>" - Value:
-
5rem
--fs-9
The largest font in the scale.
- Type:
-
"<length>" - Value:
-
6rem
Font Family
Font families. You will likely want to customize these. If you are using non-system fonts, you’ll need to make sure to set up @font-face rules in your CSS. If you need to use different fonts at different weights, you should be able to achievec this with multiple @font-face rules that use the same font-family, but different font-weight values.
--ff-sans
Sans-serif font stack, based on “Geometric Humanist” from Modern Font Stacks
- Type:
-
"<string>#" - Value:
-
Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif
--ff-serif
Serif font stack, based on “Transitional” from Modern Font Stacks
- Type:
-
"<string>#" - Value:
-
Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif
--ff-mono
Monospaced font stack, based on “Monospace Slab Serif” from Modern Font Stacks
- Type:
-
"<string>#" - Value:
-
'Nimbus Mono PS', 'Courier New', monospace
--ff-cursive
Cursive font stack, based on “Handwritten” from Modern Font Stacks
- Type:
-
"<string>#" - Value:
-
'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive
--ff-fantasy
Fantasy font stack
- Type:
-
"<string>#" - Value:
-
'Party Let', fantasy
Indent
Indents. The are three indent levels, which should be sufficient for most needs. 1 is the least amount of indent and three is the most.
--indent-1
Smallest indent of the scale
- Type:
-
"<length>" - Value:
-
1em
--indent-2
Middle indent of the scale
- Type:
-
"<length>" - Value:
-
1.5em
--indent-3
Largest indent of the scale
- Type:
-
"<length>" - Value:
-
2em
Text Width
Text width. This is not a numeric scale, but rather a semantic one. There is a standard width for text, then a wider one and a narrow one. That will suffice for most needs.
--tw
A text width suitable for any copy that a person is going to read.
- Type:
-
"<length>" - Value:
-
60ch
--tw-wide
A text width that is still readable, but slightly wider.
- Type:
-
"<length>" - Value:
-
75ch
--tw-narrow
A text width that is still readable, but slightly narrower.
- Type:
-
"<length>" - Value:
-
50ch
Letter Spacing
Letter spacing values. These are not in a numeric scale, but rather a semantic one. You likely don’t need a lot of possible values, so these four should be sufficient for most needs.
--ls-tracked
A slightly more spread out letter spacing, perhaps to make all-caps more readable.
- Type:
-
"<length> | normal" - Value:
-
0.1em
--ls-tight
A slightly tight letter spacing
- Type:
-
"<length> | normal" - Value:
-
-0.05em
--ls-mega
A pronounced wide letter spacing
- Type:
-
"<length> | normal" - Value:
-
0.25em
--ls-none
Normal/default letter spacing.
- Type:
-
"<length> | normal" - Value:
-
normal
Line Height
Line height/leading values. These are not in a numeric scale, but rather a semantic one. There is a value for copy, one for titles, and one for solid text blocks. These should suffice for most situations.
--lh-solid
Line height used for solid/compact text
- Type:
-
"<length>|<number>|<percentage>|normal" - Value:
-
1
--lh-title
Line height used for titles
- Type:
-
"<length>|<number>|<percentage>|normal" - Value:
-
1.25
--lh-copy
Line height used for copy
- Type:
-
"<length>|<number>|<percentage>|normal" - Value:
-
1.5