HARTMANN Web Design: The Typography

Fonts in use

Example illustration of the Panton font.

Panton is used for headlines, sublines, first level navigation and quotes.

Example illustration of the Roboto font.

Roboto is used for all body copy, image captions and page numbers.

Examples

The HARTMANN.info homepage gives a good impression of the typeface design and the font mix between Panton and Roboto in the interface design.

Example of the font use on the HARTMANN homepage, where the Panton and Roboto fonts are mixed.

Further usage examples: eDetailing

Example of the font use on the HARTMANN eDetailing page.

Text styles for Desktop

These styles apply to screens with a resolution greater than or equal to 992 px.

H1 The quick brown fox jumps over the lazy dog 1234567890	Panton Regular Font size: 40 px Line height: 52 px Letter spacing: 0 %
H2 The quick brown fox jumps over the lazy dog 1234567890	Panton Regular Font size: 33 px Line height: 43 px Letter spacing: 0 %
H3 The quick brown fox jumps over the lazy dog 1234567890	Panton Regular Font size: 25 px Line height: 32 px Letter spacing: 0 %
H4 The quick brown fox jumps over the lazy dog 1234567890	Panton Regular Font size: 22 px Line height: 30 px Letter spacing: 0 %
H5 The quick brown fox jumps over the lazy dog 1234567890	Roboto Regular Font size: 18 px Line height: 26 px Letter spacing: 0 %
H5 link The quick brown fox jumps over the lazy dog 1234567890	Roboto Regular Font size: 18 px Line height: 26 px Letter spacing: 0 %
Body 1 The quick brown fox jumps over the lazy dog 1234567890	Roboto Regular Font size: 16 px Line height: 26 px Letter spacing: 2 %
Body 1 link inline The quick brown fox jumps over the lazy dog 1234567890	Roboto Regular Font size: 16 px Line height: 26 px Letter spacing: 2 %
Body 1 bold The quick brown fox jumps over the lazy dog 1234567890	Roboto Medium Font size: 16 px Line height: 26 px Letter spacing: 2 %
Body 2 The quick brown fox jumps over the lazy dog 1234567890	Roboto Regular Font size: 14 px Line height: 20 px Letter spacing: 2 %
Body 2 link inline The quick brown fox jumps over the lazy dog 1234567890	Roboto Regular Font size: 14 px Line height: 20 px Letter spacing: 2 %
Body 2 bold The quick brown fox jumps over the lazy dog 1234567890	Roboto Medium Font size: 14 px Line height: 20 px Letter spacing: 2 %
Body 3 The quick brown fox jumps over the lazy dog 1234567890	Roboto Regular Font size: 12 px Line height: 16 px Letter spacing: 1 %
Body 3 link inline The quick brown fox jumps over the lazy dog 1234567890	Roboto Regular Font size: 12 px Line height: 16 px Letter spacing: 1 %
Body 3 bold The quick brown fox jumps over the lazy dog 1234567890	Roboto Medium Font size: 12 px Line height: 16 px Letter spacing: 1 %
Link The quick brown fox jumps over the lazy dog 1234567890	Roboto Medium Font size: 16 px Line height: 26 px Letter spacing: 3 %
Call to Action The quick brown fox jumps over the lazy dog 1234567890	Roboto Medium Font size: 16 px Line height: 26 px Letter spacing: 3 %
Navigation first level The quick brown fox jumps over the lazy dog 1234567890	Panton ExtraBold Font size: 15 px Line height: 24 px Letter spacing: 4.67 %
Label The quick brown fox jumps over the lazy dog 1234567890	Roboto Regular Font size: 12 px Line height: 16 px Letter spacing: 4 %
Caption The quick brown fox jumps over the lazy dog 1234567890	Roboto Regular Font size: 11 px Line height: 16 px Letter spacing: 4 %
Breadcrumb The quick brown fox jumps over the lazy dog 1234567890	Roboto Regular Font size: 14 px Line height: 22 px Letter spacing: 0.5 %
Breadcrumb bold The quick brown fox jumps over the lazy dog 1234567890	Roboto Bold Font size: 14 px Line height: 22 px Letter spacing: 0.5 %

Text styles for Mobile

These styles are valid for screens with a resolution less than or equal to 991 px.

H1 The quick brown fox jumps over the lazy dog 1234567890	Panton Regular Font size: 30 px Line height: 40 px Letter spacing: 2 %
H2 The quick brown fox jumps over the lazy dog 1234567890	Panton Regular Font size: 24 px Line height: 28 px Letter spacing: 2 %
H3 The quick brown fox jumps over the lazy dog 1234567890	Panton Regular Font size: 20 px Line height: 28 px Letter spacing: 2 %
H4 The quick brown fox jumps over the lazy dog 1234567890	Panton Regular Font size: 18 px Line height: 26 px Letter spacing: 3 %
H5 The quick brown fox jumps over the lazy dog 1234567890	Roboto Regular Font size: 16 px Line height: 22 px Letter spacing: 3 %
H5 link The quick brown fox jumps over the lazy dog 1234567890	Roboto Regular Font size: 16 px Line height: 22 px Letter spacing: 3 %
Body 1 The quick brown fox jumps over the lazy dog 1234567890	Roboto Regular Font size: 16 px Line height: 26 px Letter spacing: 2 %
Body 1 link inline The quick brown fox jumps over the lazy dog 1234567890	Roboto Regular Font size: 16 px Line height: 26 px Letter spacing: 2 %
Body 1 bold The quick brown fox jumps over the lazy dog 1234567890	Roboto Medium Font size: 16 px Line height: 26 px Letter spacing: 2 %
Body 2 The quick brown fox jumps over the lazy dog 1234567890	Roboto Regular Font size: 14 px Line height: 20 px Letter spacing: 2 %
Body 2 link inline The quick brown fox jumps over the lazy dog 1234567890	Roboto Regular Font size: 14 px Line height: 20 px Letter spacing: 2 %
Body 2 bold The quick brown fox jumps over the lazy dog 1234567890	Roboto Medium Font size: 14 px Line height: 20 px Letter spacing: 2 %
Body 3 The quick brown fox jumps over the lazy dog 1234567890	Roboto Regular Font size: 12 px Line height: 16 px Letter spacing: 1 %
Body 3 link inline The quick brown fox jumps over the lazy dog 1234567890	Roboto Regular Font size: 12 px Line height: 16 px Letter spacing: 1 %
Body 3 bold The quick brown fox jumps over the lazy dog 1234567890	Roboto Medium Font size: 12 px Line height: 16 px Letter spacing: 1 %
Link The quick brown fox jumps over the lazy dog 1234567890	Roboto Medium Font size: 16 px Line height: 26 px Letter spacing: 3 %
Call to Action The quick brown fox jumps over the lazy dog 1234567890	Roboto Medium Font size: 16 px Line height: 26 px Letter spacing: 3 %
Navigation first level The quick brown fox jumps over the lazy dog 1234567890	Panton ExtraBold Font size: 15 px Line height: 24 px Letter spacing: 4.67 %
Label The quick brown fox jumps over the lazy dog 1234567890	Roboto Regular Font size: 12 px Line height: 16 px Letter spacing: 4 %
Caption The quick brown fox jumps over the lazy dog 1234567890	Roboto Regular Font size: 11 px Line height: 16 px Letter spacing: 4 %
Breadcrumb The quick brown fox jumps over the lazy dog 1234567890	Roboto Regular Font size: 14 px Line height: 22 px Letter spacing: 0.5 %
Breadcrumb bold The quick brown fox jumps over the lazy dog 1234567890	Roboto Bold Font size: 14 px Line height: 22 px Letter spacing: 0.5 %

Infographics

Usage examples: MoliCare

For further information, get in touch

HARTMANN Branding Support

Please email us at branding.support@hartmann.info

Typography