Type Systems

A type system begins with a reading task. Someone needs to recognise a title, understand the supporting information, and find the next action. The family supplies character; the relationships between those pieces make the page usable.

Give real content different jobs

The specimen below sets existing artwork information in Oasis Geometric, my original typeface. It is a worked editorial setting, not the Art gallery’s production stylesheet. Notice what each line asks you to do: identify the medium, recognise the work, read its description, then open its record.

Making every line large would flatten the hierarchy. Making the material list tiny would remove useful information. Weight, measure, spacing, and proximity let the title lead without forcing the rest of the content to disappear.

A text role is not an HTML heading level

“Display” describes a visual job. A heading element describes document structure. Keep those decisions connected but separate: choose a heading level because of its place in the article, then give it the appropriate visual treatment. A large sentence is not automatically the page’s main heading.

This is a starting contract for this setting, not a universal scale. A dense form or a long essay would need a different balance. The useful question is whether the same reading task still feels coherent when the content changes.

Let the container change before the reading fails

A responsive title can vary more than a label or paragraph. Keep reading text steady, constrain its line length, and allow the surrounding layout to grow. A fixed-height box can defeat an otherwise sensible type scale as soon as a title wraps or text is enlarged.

.work-title {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  line-height: 1.1;
  max-width: 18ch;
}
.work-description {
  font-size: 1rem;
  line-height: 1.7;
  max-width: 48ch;
}

Check the longest title, the full material list, a narrow phone, and enlarged text. WCAG’s Resize Text criterion requires text to reach 200% without losing content or functionality, with specified exceptions. A fluid formula does not replace that check. Read the W3C explanation of Resize Text.

Use the actual family, then inspect the spacing

Oasis Geometric is supplied here in nine weights, with separate upright and oblique files. Regular uses OasisGeometric-Regular.woff2; its oblique counterpart uses OasisGeometric-Oblique.woff2. Loading the correct file matters more than asking a browser to simulate the appearance. font-synthesis: none prevents synthetic treatments; it cannot supply a missing font. MDN documents font synthesis.

Kerning uses adjustments stored for letter combinations; tracking changes spacing across a passage. The effect varies with the pair and the font. MDN explains the normal and none settings. Continue with your own words in the original type tester, or inspect its editorial and wayfinding applications.