We use tipography to distinct ourselves with our own style. We take care of complying with accesibility recommendations. The base of our style tipography is Vegur typeface, a font size of 16px for small screens and 18px for bigger screens.
The font Vegur has been selected following the marketing guidelines. We want to use this font to reinforce branding, an important aspect of our first stage of consolidating the branding of our websites.
<p><strong>{{ or (T "Bold") "Bold" }}</strong></p>
<p>{{ or (T "Regular") "Regular" }}</p>
<p class="font-light">{{ or (T "Light") "Light" }}</p>
<p><em>{{ or (T "Regular Italic") "Regular Italic" }}</em></p>
Lorem ipsum dolor sit amet consectetur adipiscing elit viverra.
Lorem ipsum dolor sit amet consectetur adipiscing elit viverra.
Lorem ipsum dolor sit amet consectetur adipiscing elit viverra.
Lorem ipsum dolor sit amet consectetur adipiscing elit viverra.
Use paragraph for normal text, remember to wrap all content inside the p tags.
<p>
Lorem ipsum dolor sit amet consectetur adipiscing, elit litora inceptos himenaeos lectus faucibus, enim integer sociis facilisi dictum. Interdum porta est diam fringilla velit curae sollicitudin fusce himenaeos penatibus nisl fermentum arcu urna donec, sem nisi taciti cursus malesuada integer parturient vestibulum convallis ad porttitor montes gravida. Per primis laoreet mus aenean luctus lectus elementum, potenti pulvinar egestas quis etiam litora vehicula, dapibus felis accumsan suspendisse mollis euismod.
Use headlines as headers for the text. Headlines must follow a hierarchy, similar to what we see in textbooks.
<h1>Lorem ipsum dolor<h1>
<h2>Lorem ipsum dolor<h2>
<h3>Lorem ipsum dolor<h3>
<h4>Lorem ipsum dolor<h4>
<h5>Lorem ipsum dolor<h5>
<h6>Lorem ipsum dolor<h6>
Use display text for important messages, you can use these text messages more for design purposes. Contrary to headers they do not have to follow a hierarchy in text.
<p class="display-1">Lorem ipsum dolor</p>
<p class="display-2">Lorem ipsum dolor</p>
<p class="display-3">Lorem ipsum dolor</p>
<p class="display-4">Lorem ipsum dolor</p>
<p class="display-5">Lorem ipsum dolor</p>
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Links have a distinguisable style to comply with accesibility guidelines, you can use classes to match the content of the pragraph or context of the link (such as emphasized), you can also use class nav-link to omit underline, but be sure you use it in a context such as a nav bar with only clickable elements around.
<a>
<a class="emphasized">
<a class="nav-link">
<a class="external-link">
<p class="emphasized">
Keep in touch!
Declare like <code>int i = 0;</code>.
int i = 0;.
<code><pre>
import *;
</pre></code>
import *;
<code class="block"><pre>
import *;
</pre></code>
import *;