Foundations / Typography
You don't choose a size. You choose a role.
RamosLabs types on three families and one ten-step scale. Every piece of text takes a role, Display, Headline, Title, Body or Label, and the role hands it a family, a size, a weight, a line-height and a tracking. Body and UI are Rubik, headlines are Red Hat Display, and Roboto waits as the fallback. Pick the role; the type takes care of itself.
Three voices
Two families with a job, plus a safe substitute. One geometric face with presence for headings, one humanist face that disappears into reading, one metric-friendly fallback for when the others cannot load.
Geometric, slightly condensed, built to carry weight above 36px. Reserved for Display and Headline. Below the Title role its personality stops helping and starts costing legibility.
Humanist, large x-height, open apertures, which is what keeps letters distinct at small sizes on real screens. The default for the whole product. If you are unsure which family to use, it is this one.
A metric-compatible substitute for dense system UI, embedded documents, or while the web fonts load. Use it for a whole block on its own, never mixed with Rubik, since it is a stand-in, not a third accent.
One scale, ten steps
Every legal size, from 12px metadata to 60px display, built as a modular scale so the jumps read as composed rather than arbitrary. 16px is the floor for body reading. Nothing on a surface sits between these steps.
Every role, one recipe
The role owns family, weight, leading and tracking. Design and build against the role in this table, never against a raw pixel. Five groups, after the Material 3 model.
| Role | Family | Weight | Leading | Tracking |
|---|---|---|---|---|
| Display | Red Hat Display | bold / extrabold | none / tight | tighter / tight |
| Headline | Red Hat Display | bold | tight / snug | tight |
| Title | Display or Sans | semibold | snug | normal |
| Body | Rubik | normal | normal / relaxed | normal |
| Label | Rubik | medium / semibold | none / snug | wide / wider |
Three axes carry the rest
Weight, line-height and tracking express hierarchy without inventing a single new size. Used well, one family covers Display down to Label. Used carelessly, they are the fastest way to break legibility.
The scale runs 100 to 800.
Rule: keep the three light weights for display sizes, and set text at 16px and under in 400 or heavier.
Why: below 16px, thin strokes lose effective contrast and fail low-vision readers.
Big text needs little leading so a stacked title holds together as one block.
Body sits at 1.5 or more, the authorial floor WCAG 1.4.8 sets for paragraphs.
Rule: set body at 1.5 line-height or more, and move long-form to --leading-relaxed 1.625.
Why: 1.5 within paragraphs is the WCAG 1.4.8 Visual Presentation (AAA) target, and generous leading keeps the eye on the right line. WCAG 1.4.12 Text Spacing (AA) is a separate promise: text must stay readable when a reader forces 1.5x spacing, which a rem scale that reflows cleanly already meets. A paragraph under 1.5 misses the AAA target, so 1.5 stays the house floor.
Rule: reserve positive tracking for uppercase Labels, and leave lowercase body at 0.
Why: extra space restores the legibility all-caps removes, while any tracking on lowercase body only distorts word shape.
The measure
Line length decides whether a paragraph is calm or exhausting, and font size has nothing to do with it. Cap running text between 45 and 75 characters with max-width in ch. Around 66 is the sweet spot.
At this width the eye finds the start of the next line without effort and the paragraph feels calm. Cap body columns in ch, never leave running text at full container width.
✕ Avoid · over 75chWhen a line runs much past seventy-five characters the reader has to travel too far back to the start of the next line, loses their place, and rereads. This is the single most common readability failure in dashboards and admin tools, where a paragraph is dropped into a wide container and allowed to stretch edge to edge. The words are fine. The width is the bug, and this line is set to a 120ch cap so you can feel it.
Hierarchy must survive one color. Distinguish levels with size, weight and space, and back every color step with a real size or weight difference so structure holds for readers who cannot perceive the shift. The scale is defined in rem, so text still scales to 200% (WCAG 1.4.4), and body holds at 1.5 line-height or more (WCAG 1.4.8).
Sources
Role groups after Material 3 type scale (m3.material.io). The 45 to 75ch measure from Butterick, Practical Typography (practicaltypography.com) and Baymard (baymard.com). Fluid type with clamp() from Utopia (utopia.fyi) and web.dev (web.dev). Accessibility floors from WCAG 2.1 SC 1.4.4 Resize Text, 1.4.12 Text Spacing and 1.4.8 Visual Presentation (w3.org/TR/WCAG21).