Font
The font used is Roboto. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types. It's available for free from the Google Fonts library.
Text styles
Clean, attractive, simple default styles for all of the most basic typographical elements.
We work with rem values that are relative to the root font-size (by default this is 16px). All the px values mentioned below are purely informative, if the font-size is edited in the browser settings, the px values won't be correct anymore.
Heading 1
2rem (32px)
Heading 2
1.75rem (28px)
Heading 3
1.5rem (24px)
Heading 4
1.25rem (20px)
Heading 5
1rem (16px)
Heading 6
0.875rem (14px)
Paragraph
1rem (16px)
Small text
0.875rem (14px)
Contextual helper classes
If you want to style certain parts that are not a specific part of a module, we have helper classes available to make your development life easier.
Text in success color. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, excepturi.
Text in warning color. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, excepturi.
Text in error color. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, excepturi.
Text in muted color. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, excepturi.
Larger body text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda officia excepturi itaque temporibus vitae consectetur consequatur, ipsum inventore facere? Fugit!
Left aligned text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, maiores?
Centered text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, maiores?
Right aligned text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, odit!
Small text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, maiores?
Very small text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, maiores?
1
2
3
4
5
6
7
8
9
10
<p class="ox-text--success">Text in <strong>success</strong> color. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, excepturi.</p>
<p class="ox-text--warning">Text in <strong>warning</strong> color. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, excepturi.</p>
<p class="ox-text--error">Text in <strong>error</strong> color. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, excepturi.</p>
<p class="ox-text--muted">Text in <strong>muted</strong> color. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, excepturi.</p>
<p class="ox-text--large">Larger body text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda officia excepturi itaque temporibus vitae consectetur consequatur, ipsum inventore facere? Fugit!</p>
<p class="ox-text--left">Left aligned text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, maiores?</p>
<p class="ox-text--centered">Centered text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, maiores?</p>
<p class="ox-text--right">Right aligned text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, odit!</p>
<p class="ox-text--s">Small text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, maiores?</p>
<p class="ox-text--xs">Very small text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, maiores?</p>