Design Manual
Typography
On how to use the type settings
1 layout examples
When you scroll down you will find sections with text. They look like this “H1 – Text”. The first bit is the style, that you can usually use while working on websites.
2 overview
further below is an overview over the styles and a short description how to use them.
a webpage is a bit like a book
In a book you got chapters and a hierarchy of titling styles. It is basically the same on the web to give the user an orientation. Consistency is important, because it is disorienting when the titling styles suddenly change – the reader will have to learn again, what that new style means.
In the next section you will see the style of hierarchy that is part of the Sensations design style.
H1 – Lorem ipsum dolor
H6 – sit amet, consectetur adipiscing elit
H3 – Lorem ipsum dolor
h5 – sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Paragraph – sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
H3 – ullamcorper mattis
h5 – mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit
Paragraph – Luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. sit amet, consectetur adipiscing elit. Ut elit tellus,
H2 – Gaudete dolor
H6 – sit amet, consectetur adipiscing elit
H3 – ipsum dolor
h5 – sit amet, consectetur adipiscing elit. Ut elit tellus
Paragraph – sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
H3 – ullamcorper
h5 – mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit
Paragraph – Luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. sit amet, consectetur adipiscing elit. Ut elit tellus,
H3 – mattis
h5 – dolor sit amet, consectetur adipiscing elit. Ut elit
Paragraph – Luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. sit amet, consectetur adipiscing elit. Ut elit tellus,
H2 – dolor Ex hominem
H6 – sit amet, consectetur adipiscing elit
H3 – ipsum dolor
h5 – sit amet, consectetur adipiscing elit. Ut elit tellus adipiscing elit. Ut elit tellus, luctus nec.
Paragraph – sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
H4 – ullamcorper mattis
Paragraph – Luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
h4 – Zwischentitel
dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. sit amet, consectetur adipiscing elit. Ut elit tellus,
h4 – dolor sit amet, consectetur adipiscing elit. Ut elit
Paragraph – Luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. sit amet, consectetur adipiscing elit. Ut elit tellus,
styles Overview
All the styles at one glance
H1 – Lorem
H2 – ipsum
H3 – dolor ullamcorper mattis
H4 – sit amet ullamcorper mattis
Titles
H1, H2, H3, H4
The first four styles are for titles.
H5 – consectetur ullamcorper mattis
H6 – adipiscing elit ullamcorper mattis
Paragraph – Ut elit tellus, luctus nec ullamcorper mattis, Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Special Styles & Paragraph
H5
H5 is for a highlighted introductory sentence before some standard paragraphs.
H6
H6 is used for subtitling H1 and H2.
Paragraph
The paragraph. The simple text.