Typography
Visma uses the Open Sans font for our web applications. By default, it's loaded from Google Fonts, but we've also included the font files if you prefer to host them on your own servers. We use the latin and latin extended families to cover characters in use by Visma's users.
As a secondary font-family we use Ubuntu. This font is also loaded from Google Fonts, but you can find it in the "Fonts" folder if you need to load it from the server.
Another option to load both fonts is from fonts.visma.com:
Open Sans:
Light - https://font.visma.com/Fonts/OpenSans/OpenSans-Light.ttf
Regular - https://font.visma.com/Fonts/OpenSans/OpenSans-Regular.ttf
Semibold - https://font.visma.com/Fonts/OpenSans/OpenSans-SemiBold.ttf
Bold - https://font.visma.com/Fonts/OpenSans/OpenSans-Bold.ttf
Extrabold - https://font.visma.com/Fonts/OpenSans/OpenSans-ExtraBold.ttf
Ubuntu:
Thin - https://font.visma.com/fonts/ubuntu/ubuntu-th.ttf
Light - https://font.visma.com/fonts/ubuntu/ubuntu-light.ttf
Regular - https://font.visma.com/fonts/ubuntu/ubuntu-regular.ttf
Bold - https://font.visma.com/fonts/ubuntu/ubuntu-bold.ttf
Headings
Style name | Font family | Size | Weight | Sample |
---|---|---|---|---|
<h1> |
Ubuntu | 24 | normal | My favorite childhood memory is not paying bills. |
<h1 class="bold"> |
Ubuntu | 24 | bold | My favorite childhood memory is not paying bills. |
<h2> |
Ubuntu | 20 | normal | My favorite childhood memory is not paying bills. |
<h2 class="bold"> |
Ubuntu | 20 | bold | My favorite childhood memory is not paying bills. |
<h3> |
Ubuntu | 16 | normal | My favorite childhood memory is not paying bills. |
<h3 class="bold"> |
Ubuntu | 16 | bold | My favorite childhood memory is not paying bills. |
<h4> |
Ubuntu | 16 | normal | My favorite childhood memory is not paying bills. |
<h4 class="bold"> |
Ubuntu | 14 | bold | My favorite childhood memory is not paying bills. |
<h5> |
Ubuntu | 13 | normal | My favorite childhood memory is not paying bills. |
<h5 class="bold"> |
Ubuntu | 13 | bold | My favorite childhood memory is not paying bills. |
Body
Global default font-size
is 14px, with a line-height
of 1.4. This is applied to the <body>
and all paragraphs.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Inline text elements
Styling for common inline HTML5 elements.
<mark>
</mark>
You can use the mark tag to highlight text.
<del>
</del>
This line of text is meant to have a line through it.
<s>
</s>
This line of text is meant to have a line through it.
<ins>
</ins>
This line of text is meant to be underlined.
<u>
</u>
This line of text is meant to be underlined.
<small>
</small>
This line of text is meant to be smaller (12px).
<strong>
</strong>
This line of text is meant to be bold.
<em>
</em>
This line of text is meant to be italic.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to have a line through it.</del></p>
<p><s>This line of text is meant to have a line through it.</s></p>
<p><ins>This line of text is meant to be underlined.</ins></p>
<p><u>This line of text is meant to be underlined.</u></p>
<p><small>This line of text is meant to be smaller (12px).</small></p>
<p><strong>This line of text is meant to be bold.</strong></p>
<p><em>This line of text is meant to be italic.</em></p>