Usage

WeightsCopy Anchor Link

Every family is variable from 100 to 900, so font-weight accepts any value in that range, not just multiples of 100:

.label { font-weight: 450; }      /* between Regular and Medium */
.price { font-weight: 560; }
h1     { font-weight: 720; }

The static files in the zips are these nine named instances.

Variable axesCopy Anchor Link

Prefer font-weight for the weight axis: it cascades, works with bold/bolder, and lets the browser pick the right face. Use font-variation-settings only for axes without a CSS property, such as Bloxwap Pixel's roundness:

.scoreboard {
  font-family: "Bloxwap Pixel", monospace;
  font-weight: 700;
  font-variation-settings: "ROND" 60; /* 0 = square pixels, 100 = dots */
}

font-variation-settings does not inherit per axis: setting it on a child replaces the whole list. Keep it on the element that needs it. See Variable fonts.

ItalicsCopy Anchor Link

Sans, Mono and Pixel have true italics (drawn at 9°, with the stroke weight preserved), served from separate files. Use font-style:

em, i { font-style: italic; }

Declare the italic @font-face (as in Installation) or the browser will synthesize a slanted copy of the upright. To make sure that never happens, add font-synthesis: none.

Armenian and Georgian companions include italics. Arabic, Hebrew, Japanese, Korean and Chinese use their upright design in italic text.

OpenType featuresCopy Anchor Link

Use the high-level font-variant-* properties where one exists. They combine with each other and inherit predictably. Fall back to font-feature-settings for stylistic sets and anything else.

* Browser support varies; "case" 1 is the reliable way to raise brackets and dashes for all-caps text.

Bloxwap Sans uses tabular figures by default so numbers align in tables and tickers. In running text, proportional figures read more evenly:

.prose { font-variant-numeric: proportional-nums; }
.price, td { font-variant-numeric: tabular-nums slashed-zero; }
.label-caps { text-transform: uppercase; font-feature-settings: "case" 1; }
.brand { font-feature-settings: "ss01" 1, "ss02" 1; } /* single-storey a, open digits */

Several settings combine in one declaration; a second font-feature-settings rule replaces the first rather than adding to it.

Code ligatures in MonoCopy Anchor Link

Bloxwap Mono turns sequences such as =>, !==, <=, -> and |> into ligatures through contextual alternates (calt). Each ligature keeps the width of its characters, so columns stay aligned. They are on by default; to turn them off:

code, pre { font-variant-ligatures: none; }
/* or only the code ligatures */
code, pre { font-feature-settings: "calt" 0; }

OpenType features lists every feature in each font with a live preview.

Localized formsCopy Anchor Link

Some languages use different letterforms for the same character: Romanian and Moldovan prefer a comma below on ș and ț, Catalan has its own form of the punt volat in l·l, and Serbian, Macedonian and Bulgarian Cyrillic have local shapes. The browser selects them from the lang attribute; there is nothing to configure:

<p lang="ro">Știință și țară</p>
<p lang="sr">Бб Гг Дд Пп Тт</p>
<p lang="bg">джл фц</p>

Use the type tester's language menu on the home page to compare.

AccessibilityCopy Anchor Link

Keep text as ordinary Unicode characters in HTML. OpenType alternates and ligatures change the drawing while preserving the underlying text: -> should remain those two characters even when a feature draws an arrow. Do not replace letters with similar-looking Greek, Cyrillic or mathematical characters for a visual effect. Use lang for the language of the text so browsers and assistive technology can select the appropriate forms and pronunciation.

For codes and identifiers, compare Il1, 0O, rn/m and cl/d at the actual size and weight your interface uses. The ss08 disambiguation set and slashed zero can help. Sans already has bars on capital I by default; ss08 adds a curved foot to lowercase l and retains its capital I alternate for compatibility. The zero feature separately distinguishes zero from capital O:

.identifier {
  font-family: "Bloxwap Sans", system-ui, sans-serif;
  font-feature-settings: "ss08" 1;
  font-variant-numeric: slashed-zero;
}

Check punctuation, accents and open counters at small sizes, especially at the lightest and heaviest weights. Prefer Sans for body text and Mono for code. Regular or Medium around 16 px is a useful starting point for essential text. Reserve Pixel for display text, starting at 20 px and checking the selected weight and roundness on the target screen. These are starting points for testing, not a guarantee of readability for every reader.

A symbol used as a control needs a name that describes its action. Hide a decorative symbol when the button already has a text label:

<button type="button" aria-label="Next page">
  <span aria-hidden="true">→</span>
</button>
<button type="button">
  Download <span aria-hidden="true">↓</span>
</button>

Prefer visible labels where possible. See the W3C guidance on accessible names.

Allow readers to replace the font, enlarge text and increase spacing. Avoid fixed-height containers for labels and body text; let controls wrap or grow. Test text at 200% enlargement and page reflow at 400% zoom, plus a system-font replacement. For scripts that use these spacing properties, also test line height of 1.5 times the font size, paragraph spacing of 2 times the font size, letter spacing of 0.12em and word spacing of 0.16em applied together. The page must keep its content and controls usable; these values are user overrides, not required default styles. See W3C text spacing.