Typography
Typography is how you use text to create visual hierarchy. Good typography can make content easier to read and help the user scan the page to find the information they need.
Typeface
Fabric uses 2 Font variants from the FINNtype font set
- FinnTypeStrippet-light - For all non bold text.
- FinnTypeStrippet-Medium - All bold text.
Font sizes
Headings
h1 - h5 Are ready to use header types. Including all the styling the headings are supposed to have.
Text-sizes
Predefined font-sizes including line-heights, these come with regular text styling, same as the default text size (text-16). When creating custom things that call for other text sizes these should be used. (unless it actually is a logical heading)
| Size | Line-height | Name | Appearance |
|---|---|---|---|
| 34px | 41px | h1 | Heading |
| 28px | 34px | h2 | Heading |
| 22px | 28px | h3 | Heading |
| 16px | 22px | h4 | Heading |
| 14px | 18px | h5 | Heading |
| 34px | 41px | text-34 | Quick foxes |
| 28px | 34px | text-28 | Quick foxes |
| 22px | 28px | text-22 | Quick foxes |
| 16px | 22px | text-16 | Quick foxes |
| 14px | 18px | text-14 | Quick foxes |
| 12px | 16px | text-12 | Quick foxes |
Text formatting
Text formatting can be used to visually add clarity and adjust voice or meaning.
Bold
Be careful with personal information
Italic
Underline
Used as a hover state for text links and should never be used as a mechanism to add emphasis.
Strikethrough
Guidelines
Don't use underlines for adding emphasis
Underlines makes the text look like links. They should not be used as a way for adding emphasis to words.
Avoid walls of text
Keep paragraphs concise. Some users with cognitive disabilities (and even those who don’t) can have a very difficult time reading and comprehending large blocks of text. Divide text into paragraphs and include headings, white space, and illustrations if you have to.
Left align text
It is more difficult to read blocks of text which is centered or right aligned, since the eyes would jump back and forth withouth having a consistent point to go back to on the next line.
Don't let paragraphs get too thin
Paragraphs of text that are too thin are difficult to read, as the eyes jump back and forth too much. If the paragraph texts are too long, it is difficult to locate the next line. Ideally, block of text should be 70 characters wide.