Typography
Throughout Leviy typography helps clearly communicate and focus attention. For the user interface the typographic font chosen is Roboto. Choosing and applying typography consistently throughout the user interface generates a clear visual pattern for our users.
Guidelines
Avoid typography circus
Too many fontsizes in one screen can become very overwhelming and distract the user from the task ahead, and therefore also cause hindrance with regards to achieving the ultimate goal. When adding a new fontsize to a screen make sure it adds clarity and does not overwhelm the user.Easy on the eye
Choose a font style that supports readability for the most common device it is displayed on. Fontsize, letterspacing and paragraph width can make or break readability.Design for hierarchy
Like colours, typography should help bring attention to the most important parts of the screen. The usage of different font styles helps distinguish hierarchy.Font styles
Our font styles vary in size, weight and letter spacing.
| HTML | Example |
<h1 />
or
<span class="header-1" />
|
Header 1 |
<h2 />
or
<span class="header-2" />
|
Header 2 |
<h3 />
or
<span class="header-3" />
|
Header 3 / 4 |
<h5 />
or
<span class="header-5" />
|
Header 5 / 6 |
<span class="subheading" />
|
Subheading |
<p />
or
<span class="body-1" />
|
Body 1 / 2 Phasellus quis velit tellus. Nunc vel quam nec tortor rutrum fermentum eget efficitur magna. Praesent bibendum enim mattis turpis consectetur, ut lacinia leo cursus. Mauris egestas facilisis scelerisque. Sed vestibulum sit amet ligula eu pretium. Proin eu venenatis tellus. Nunc ipsum felis, sollicitudin non tristique quis, tincidunt non dolor. Proin rutrum quis enim nec imperdiet. Cras nec leo non mauris ultricies egestas. Curabitur lacus leo, fermentum a ligula vel, sodales vestibulum tellus. |
<small />
or
<span class="caption" />
|
Caption |
Emphasis
Emphasis can be made by using different colours to help distinguish hierarchy and states. If visual hierarchy has already been established through typographic scale, further emphasis or de-emphasis can be created by muting certain text. Only colours from our colour palette can be used for this.
Do
Use muted text for supporting body content.
Product Informatieblad
2019-2020Don't
Use muted text on it’s own unless it signifies an empty or disabled state.
Settings
Do
Use headings for titles of pages.
Don't
Use font styles other than headings for titles of pages.
Do
Make sure contrast ratio of normal active text is at least 4.5:1 and 3:1 for large text. Use this contrast checker to check this.
Don't
Design components or pages with active items that are below the required contrast ratio.
Product Informatieblad
2019-2020Resources
Our typography is based on Material Design’s guidelines. Make sure to also read Understanding typography.