Typography

All typography rules are included in wexa.css — no additional stylesheet required. Headings, body text, inline elements, lists and blockquotes are styled by default. Colors and font metrics are controlled by CSS variables.

Headings

Six heading levels are available. Each level has its own color variable, and font size is computed relative to --font-size so that the scale adapts to all screen sizes and accessibility modes.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Variables

Heading colors are controlled by the theme variables:

Font families

Four font family classes are available: .font-sans, .font-serif, .font-mono and .font-pre. Each maps to its corresponding CSS variable and falls back gracefully when the named font is not installed. In contrast mode, all families fall back to ContrastFont for improved legibility.

<p class="font-sans">Sans text</p>
<p class="font-serif">Serif text</p>
<p class="font-mono">Mono text</p>
<p class="font-pre">Pre text</p>

Script blocks

Every family is cut into unicode-range subsets, one file per script block. A block travels only when the page holds one of its characters: an English or a French page never fetches the Greek or the Cyrillic outlines, and no character is ever lost since the blocks cover the whole font.

To watch it happen, open the network panel of the browser, filter it on fonts and reload this page: besides the latin block every page needs, the samples below pull the files facing them, and no other. A sample rendered in another typeface than its neighbours means its subset failed to load.

The accessible font follows the same rule. Press the contrast button of the navigation bar: every family is replaced by ContrastFont, and the samples above pull the AccessibleDfA subsets instead.

AccessibleDfA does not draw every script, though. It knows the latin letters, the phonetic characters and a handful of Greek and Cyrillic ones, and nothing more. A subset holds the characters the font really draws, so the Greek and the Cyrillic samples fall back to the sans family in contrast mode and stay readable, where a font announcing a character it leaves empty would show nothing at all.

@font-face {
    font-family: SansFont;
    src: url('../fonts/Commissioner-greek.woff2') format('woff2');
    font-display: swap;
    unicode-range: U+0374-0375, U+037E, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE, U+03D7;
}

@font-face {
    font-family: ContrastFont;
    src: url('../fonts/AccessibleDfA-Regular-greek.woff2') format('woff2');
    font-style: normal;
    font-weight: normal;
    unicode-range: U+0374-0375, U+037A-037E, U+0384-03FF;
}

Font weights

Four weight classes are available: .font-weight-thin, .font-weight-normal, .font-weight-bold and .font-weight-black. In contrast mode, the underlying numeric values are automatically increased so that all weights remain legible at higher contrast levels.

<p class="font-sans font-weight-thin">weight thin</p>
<p class="font-sans font-weight-normal">weight normal</p>
<p class="font-sans font-weight-bold">weight bold</p>
<p class="font-sans font-weight-black">weight black</p>

Inline text elements

Standard HTML inline elements are styled by default. No class is required.

<a href="...">Link</a>
<strong>Bold</strong>
<em>Italic</em>
<u>Underline</u>
<del>Deleted</del>
<ins>Inserted</ins>
<s>Strikethrough</s>
<small>Small</small>
<sub>sub</sub>  <sup>sup</sup>
<abbr title="...">Abbr.</abbr>
<kbd>Ctrl+K</kbd>
<mark>Highlighted</mark>

Blockquote

Use <blockquote> for extended quotations. An optional <cite> element inside the blockquote renders the attribution on its own line.

A theme paints the quote with --blockquote-border-color, --blockquote-bg-color, --blockquote-fg-color and, for the <cite> line, --blockquote-footer-color. The last three are unset by default: the quote then reads its ground from the --bg-color-alt to --bg-color gradient and its ink from --fg-color. Setting --blockquote-bg-color replaces the gradient with one flat color.

<blockquote>
    Quote text.
    <cite>&mdash; Author</cite>
</blockquote>

Lists

Unordered (<ul>), ordered (<ol>) and description (<dl>) lists are all styled by default. No class is required.

<ul>
    <li>Item</li>
</ul>

<ol>
    <li>Item</li>
</ol>

<dl>
    <dt>Term</dt>
    <dd>Description</dd>
</dl>

Aside

Use <aside> to display supplementary content visually distinguished from the main text — a note, a warning, a tip.

<aside>Supplementary content.</aside>
<p>Main content.</p>