Typography

Halden is set in Switzer throughout. Every Text variant below, from the largest display size to the smallest label, with the sizes each one steps through.

  • Aa

    Switzer

    A neo-grotesk by Jérémie Schmidt, free on Fontshare. Loaded in Fonts.astro and set as --font-sans in src/styles/fonts.css.

  • Regular 400Medium 500Semibold 600Bold 700

    Weights

    400 for body copy, 500 for filters and small labels, 600 for headings and buttons. 700 is loaded too, for prose emphasis.

Display

Headings, prices and big numbers, in semibold with tight tracking from displaySM up.

  • Pick one thing tonight

    display4XL, text-6xl to lg:text-9xl

  • Pick one thing tonight

    display3XL, text-5xl to lg:text-8xl

  • Pick one thing tonight

    display2XL, text-5xl to lg:text-7xl

  • Pick one thing tonight

    displayXL, text-4xl to lg:text-6xl

  • Pick one thing tonight

    displayLG, text-3xl to lg:text-5xl

  • Pick one thing tonight

    displayMD, text-2xl to lg:text-4xl

  • Pick one thing tonight

    displaySM, text-lg to lg:text-3xl

  • Pick one thing tonight

    displayXS, text-base to lg:text-2xl

Text

Body copy, subtitles, captions and labels, in regular weight.

  • Halden asks for one task a day, then keeps everything else out of the way.

    textXL, text-lg to md:text-2xl

  • Halden asks for one task a day, then keeps everything else out of the way.

    textLG, text-base to md:text-xl

  • Halden asks for one task a day, then keeps everything else out of the way.

    textBase, text-base

  • Halden asks for one task a day, then keeps everything else out of the way.

    textSM, text-sm

  • Halden asks for one task a day, then keeps everything else out of the way.

    textXS, text-xs

  • Halden asks for one task a day, then keeps everything else out of the way.

    text2XS, text-2xs