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 |
<h4 />
or
<span class="header-4" />
|
Header 4 |
<h5 />
or
<span class="header-5" />
|
Header 5 |
<h6 />
or
<span class="header-6" />
|
Header 6 |
<p />
or
<span class="body-1" />
|
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. |
<span class="body-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. |
<span class="text-wide" />
|
Extra letter spacing |
<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 subdueing certain text.
Here will come some examples of some best and bad practices for using subdued text
Resources
Our typography is based on Material Design’s guidelines. Make sure to also read Understanding typography.