You can change which font size and family are used throughout the page by modifying the following defaults:

:root {
  --font-family: var(--monospace);
  --font-size: calc(8px + 1vmin);
}

Fonts

DejaVu Sans Mono

Programming fonts are meant to be legible by design. This one feels fun and gentle while doing so. Use it for headings, emphasis, and interactive components, or for everything if you want.

Use it like font-family: var(--monospace); or class="mono"

Atkinson Hyperlegible Next

This is a good choice in general if you need a sans-serif. It's designed to be easier to read for people with low vision and dyslexia. Read more about it on the Braille Institute's website.

Use it like font-family: var(--sans-serif); or class="sans"

Icons

Mutant Standard

This is an alternative Emoji set that broadens the spec to include queer, therian, and other inclusive iconography. Use it like this:

<i class="mtnt-orc" aria-label="text description"></i>

See the full list of class names. We may generate and provide an SVGinOT font later on.