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

Headings

<h1></h1> h1 heading

<h2></h2> h2 heading

<h3></h3> h3 heading

<h4></h4> h4 heading

<h5></h5> h5 heading

Body

Global default font-size is 14px, with a line-height of 18px. 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>