H1 / Page title
i12e.eu / typography
H2 / Section
A clear starting point
H3 / Subsection
Bring related ideas together
H4 / Group
Make the next step visible
H5 / Detail
Keep the details close
H6 / Nested detail
Even the smallest heading has a role
Paragraph / Regular 400
Roboto for headings and prose. Roboto Mono for brand accents, code, and the details.
01 / Reading & emphasis
Room for the words
A paragraph should be comfortable to read from the first word to the last. A consistent rhythm gives each sentence room, while a considered line length makes the next line easy to find.
This second paragraph shows the space between ideas. Resize the preview to see how the same passage wraps, and increase the text size to check that the layout continues to work.
Use bold for important information, italic for emphasis, and both when the meaning calls for it. A link to the brand defaults stays recognisable through its underline.
The b element draws attention; the i element marks an alternate voice. Their appearance matches bold and italic, while their meaning differs from strong importance and emphasis.
Small text / Supporting notes and captions start at 14px equivalent. Essential information stays at body size.
Accents & symbols: café, naïve, coöperatie, Straße, Ångström, €29.50, £18.00, 0123456789. Chemistry uses H2O; an area might be 24m2.
02 / Lists
Order where it matters
Use an ordered list when the sequence is meaningful.
- Start with the reader’s main task.
- Arrange the information.
- Introduce the subject.
- Add the details the reader needs.
- Check the result at different text sizes and screen widths.
Use an unordered list when the items are peers.
- Clear headings and readable paragraphs.
- Consistent text treatments.
- Bold for importance.
- Italic for emphasis.
- Enough room for a longer list item to wrap naturally, without losing the alignment of its marker or the relationship to the items around it.
03 / Quotes & definitions
A different voice
Give each idea enough room to be understood.
- Typeface
- A family of letterforms. Roboto carries the main reading experience; Roboto Mono supplies the monospaced accents.
- Line-height
- The distance between lines of text, expressed here as a multiple of the font size.
- Measure
- The width of a text column. The default is 65ch, limited by the available space.
04 / Code & keyboard input
The technical details
Inline code such as font-family uses Roboto Mono. Press Tab to move
through the controls and Enter to activate a focused link.
.article {
font-family: "Roboto", Arial, sans-serif;
line-height: 1.6;
max-width: 65ch;
}Long text wraps too: https://design.i12e.eu/typography/examples/a-long-reference-without-convenient-line-breaks
05 / Tabular text
Information at a glance
| Use | Typeface | Weight |
|---|---|---|
| Headings | Roboto | 600 |
| Body text | Roboto | 400 |
| Strong emphasis | Roboto | 700 |
| Code & accents | Roboto Mono | 400 |
06 / In context
Designing a useful reference
i12e / Design notes
A design reference connects a decision to the places it will be used. A heading introduces the subject. The paragraphs explain it, and the details help someone put it into practice.
Start with the reading experience
The words come first. Give the text a clear order, keep related ideas together, and use emphasis with intent. Typography should help the reader understand what matters.
- Use a descriptive heading.
- Keep supporting text close to its subject.
- Make further guidance easy to recognise.
A change of subject
The horizontal rule above marks a thematic break. It separates this closing note from the guidance before it without adding another heading level.
07 / Colour roles · approved palette
Meaning before colour
These samples use the shared colour specification. Switch the page appearance to review the same typography with approved light or dark roles.
Primary / Main reading text.
Secondary / Supporting context with readable contrast.
Link / Read about colour roles.
Warning: This is a sample warning. Its meaning is written out as well as indicated by colour.