Typography System
Using a typographic scale and great fonts can help communicate content more efficiently, while making design easier.
Typography presets are fully customizable via the use of variables. You can easily alter the fonts used and the type scale’s presets as desired.
Fonts
furl relies upon a 3-font system to provide a great user experience, well-tailored for any type of device and content. Apart from customizable fonts, a native font stack is used as a fallback.
| Font sample | Variable name | Default value | Description | |||
|---|---|---|---|---|---|---|
| Dog says woof! | --font-a | Roboto | Primary font - used in most places. | |||
| Dog says woof! | --font-b | Open Sans | Secondary font - used mainly in titles. | |||
| Dog says woof! | --font-c | Roboto Mono | Code font - used in code elements. | |||
Note: The default fonts will not be loaded automatically. Instead, it's the developer's responsibility to load all the necessary fonts (including the default ones) in their application. Please see the getting started section for more information.
Type Scale
furl uses a 11-step typographic scale with handcrafted defaults that work for any type of content.
| Scale sample | Variable name | Default value | Description | |||||
|---|---|---|---|---|---|---|---|---|
| Aa | --ts-25p | 12px | Smallest font size. | |||||
| Aa | --ts-50p | 14px | Smaller font size. Used mainly in <small> elements. | |||||
| Aa | --ts-100p | 16px | Base font size (1rem). Used in most places. | |||||
| Aa | --ts-200p | 18px | Larger font size. | |||||
| Aa | --ts-300p | 20px | Heading font size. Used in <h6> elements. | |||||
| Aa | --ts-400p | 24px | Heading font size. Used in <h5> elements. | |||||
| Aa | --ts-500p | 30px | Heading font size. Used in <h4> elements. | |||||
| Aa | --ts-600p | 36px | Heading font size. Used in <h3> elements. | |||||
| Aa | --ts-700p | 48px | Heading font size. Used in <h2> elements. | |||||
| Aa | --ts-800p | 60px | Heading font size. Used in <h1> elements. | |||||
| Aa | --ts-900p | 72px | Main heading font size. | |||||
Note: The default step values above correspond to the calculated values of converting the rem value of each step to pixels.