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/titles

Style name Font family Size Weight Sample
<h1> or <title> Ubuntu 48 normal

My favorite childhood memory is not paying bills.
<h1 class="bold"> or <title class="bold"> Ubuntu 48 bold

My favorite childhood memory is not paying bills.
<h2> Ubuntu 32 normal

My favorite childhood memory is not paying bills.
<h2 class="bold"> Ubuntu 32 bold

My favorite childhood memory is not paying bills.
<h3> Ubuntu 20 normal

My favorite childhood memory is not paying bills.
<h3 class="bold"> Ubuntu 20 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 16 bold

My favorite childhood memory is not paying bills.
<h5> Ubuntu 14 normal
My favorite childhood memory is not paying bills.
<h5 class="bold"> Ubuntu 14 bold
My favorite childhood memory is not paying bills.
<h6> Ubuntu 13 normal
My favorite childhood memory is not paying bills.
<h6 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>