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 PF Beau Sans that is used for the login pages design.

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.

				
<!-- Headings -->
<h1>h1 heading</h1>
<h2>h2 heading</h2>
<h3>h3 heading</h3>

<!-- Inline text elements -->
<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>