Typography
Typography is organizing textual communication. This includes a typographic palette that aligns with the functional and aesthetic demands of what is being communicated. The correct and consistent appliance of typography ensures a recognizable tone of voice that supports the message and contributes to the brand experience.
Typefaces#
Whyte#
Whyte is our corporate typeface. It reflects our brand identity, appeals to our audience and shares visual characteristics with our icon. It is a sans-serif typeface inspired by early grotesk typefaces which, in the context of Huis op zak, has a perfect balance between formal, sophisticated and friendly.
Get WhyteElements#
Huis op zak uses a simple typographic hierarchy. It consists of headings and paragraphs. Elements in this guide are indicative and therefore not expressed in absolute, but relative sizes in terms of the relation between elements. The paragraph is the base element.
Heading 1
| Family | Whyte |
| Weight | Bold |
| Color | Honey |
| Size | paragraph × 3 |
| Lineheight | 1:1.2 |
Heading 2
| Family | Whyte |
| Weight | Book |
| Color | #2A1F49 |
| Size | paragraph × 2 |
| Lineheight | 1:1.2 |
Heading 3
| Family | Whyte |
| Weight | Bold |
| Color | #4D4D4D |
| Size | =paragraph |
| Lineheight | 1:1.2 |
Paragraph
| Family | Whyte |
| Weight | Book |
| Color | #4D4D4D |
| Size | 16-18px for web, 8-12pt for print |
| Lineheight | 1:1.5 |
Text on a background#
Within our visual identity, it's possible that text will appear on a background color. In that case, follow the guidelines below.
Heading 1
| Family | Whyte |
| Weight | Bold |
| Color | #4D4D4D |
| Size | paragraph × 3 |
| Lineheight | 1:1.2 |
Heading 2
| Family | Whyte |
| Weight | Regular |
| Color | #FFFFFF |
| Size | paragraph × 2 |
| Lineheight | 1:1.2 |
Heading 3
| Family | Whyte |
| Weight | Bold |
| Color | #4D4D4D |
| Size | =paragraph |
| Lineheight | 1:1.2 |
Paragraph
| Family | Whyte |
| Weight | Regular |
| Color | #4D4D4D |
| Size | 16-18px for web, 8-12pt for print |
| Lineheight | 1:1.5 |
Semantics#
Emphasis & italics#
Keep the same font color, but change the font-style to italics.
Strong & bold#
Keep the same font color, but change the font-style to bold.
Hyperlink#
Keep the same font color and underline.
Usage#
Alignment#
In order to ensure a clear, contemporary looking and calm reading experience, all running text should be left-aligned.
Line length#
If a line of text is too short or too long, the reader’s eye will experience difficulty in reading the text. For paragraphs, we regard 10 to 12 words as an ideal line length.
Casing#
Use sentence case only. In sentence case, only the first word of a sentence and proper nouns have initial capitals.