Skip to content
Polytope
Search

Finds pages and their sections, every token, every .ply class, and every Astro component.

    Menu

    Typography

    Three faces with separate jobs: a wood-type slab for titles, a workhorse grotesque for reading, a mono for code.

    In this chapter 7 pages

    The faces

    Point, line, plane

    Ultra. A fat Clarendon in the manner of 19th century wood type. Page titles, section titles, the wordmark, big numerals. Apache 2.0.

    Message passing on simplicial complexes

    Libre Franklin. A revival of Franklin Gothic, the American grotesque of mid-century signage and print. Body, interface, captions, tables. Variable weight, SIL OFL.

    loss = F.cross_entropy(logits, y)

    JetBrains Mono. Code, keyboard keys, and numeric parameters in demos. Variable weight, SIL OFL.

    Rules for Ultra

    • Titles only, at 24px and up. It is too heavy to read in sentences.
    • Sentence case. No capitals throughout, no italics, no letter-spacing beyond the built-in -0.01em.
    • A page title may end in the tomato full stop. One per page.
    • While Ultra loads, titles show in Georgia Bold scaled to Ultra's widths and line heights (the Ultra Fallback face), or in Liberation Serif Bold where Georgia is missing, so they keep their size and line breaks when Ultra arrives. Reading text and code get the same treatment from Arial and from Menlo or Liberation Mono.

    Rules for reading text

    • Body is 17px with 1.6 line height, in a column of about 68 characters (--ply-layout-measure).
    • Headings from h3 down use Libre Franklin bold. Space above a heading is larger than space below it.
    • Numbers in tables use tabular figures so columns line up. The table component sets this.
    • Mono is for code and values, never for labels that only want to look technical.

    Scale

    TokenValueSample
    --ply-size-xs0.8125remSimplices and cells
    --ply-size-sm0.875remSimplices and cells
    --ply-size-ui0.9375remSimplices and cells
    --ply-size-md1remSimplices and cells
    --ply-size-body1.0625remSimplices and cells
    --ply-size-body-wide1.125remSimplices and cells
    --ply-size-lg1.25remSimplices and cells
    --ply-size-xl1.5remSimplices and cells
    --ply-size-2xl2remSimplices and cells
    --ply-size-3xl2.75remSimplices and cells
    --ply-size-4xl4remGraphs
    --ply-size-displayclamp(3rem, 1.6rem + 4.4vw, 5.75rem)Graphs

    The display size is fluid: 48px on a phone, growing with the viewport to 92px.