Typography

Newsreader for what people read. Inter for everything else.

Both are on Google Fonts.

Scale

Nine styles, from hero to column header.

  • Hero

    Newsreader Regular, 44 to 88 px, leading 1.05, -0.02em

    The landing page headline.

    Interview your whole company in days.

  • Banner

    Newsreader Regular, 40 to 74 px, leading 1.1, -0.02em

    The claim on a photo, the closing question.

    Listen & move forward.

  • Display

    Newsreader Regular, 40 to 60 px, leading 1.08

    H1 on other pages.

    What comes back after the interviews.

  • Title

    Newsreader Regular, 32 to 44 px, leading 1.12

    H2.

    Three signals that grew since last quarter.

  • Heading

    Newsreader Regular, 24 px, leading 1.2

    H3, names, step titles.

    Every answer is coded.

  • Figure

    Newsreader Regular, 48 px, tabular lining numerals

    Big figures with their source.

    34%

  • Body

    Inter Regular, 16 to 17 px, leading 1.5 to 1.6

    Body text, UI, emails, captions.

    Sona8 talks with your people and asks the follow-up questions.

  • Section label

    Inter Bold, uppercase, 13 px, +0.1em

    Small labels above a section, footer headings.

    What comes back

  • Column header

    Inter Bold, uppercase, 12 px, +0.04em

    Table column headers.

    Next step and owner

Rules

Case, weight and fallbacks.

  • Two faces: Newsreader for headlines, quotes and long reading prose; Inter for body, UI and figures in running text.
  • Headlines are never bold. No monospace face.
  • Write everything in sentence case. Uppercase comes only from the style of section labels, column headers and buttons.
  • Figures in Inter use tabular numerals.
  • Where the fonts can't be installed: Georgia for Newsreader, Arial for Inter.