v0.22.0
Guides

Typography

Outfit is also the name of a typeface. It was created for Outfit (outfit.io) and released as an open source font on Google Fonts, so anyone can use it for free. This documentation site is set in it.

About the typeface

Outfit is a geometric sans-serif. Its letters are built from circles and straight lines, which gives it a friendly, modern and very legible character at both display and text sizes. That fits a brand about making things look right.

  • Style: Geometric sans-serif, single-storey a and g, round o.
  • Weights: A variable font with nine weights, from Thin (100) to Black (900).
  • Licence: SIL Open Font License, free for personal and commercial use.
  • Source: Google Fonts.

Specimen

Weights

Using Outfit in your product

Load the font from Google Fonts, then use it as the fontFamily where you want it.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
body {
  font-family: 'Outfit', sans-serif;
}

With Outkit, set it through the theme so every component picks it up:

import { ThemeProvider, outkitTheme } from '@outfitio/outkit';


const theme = {
  ...outkitTheme,
  fonts: { ...outkitTheme.fonts, heading: "'Outfit', sans-serif", body: "'Outfit', sans-serif" },
};


<ThemeProvider theme={theme}>...</ThemeProvider>;

Outkit's default theme uses Open Sans, Noto Sans and IBM Plex Mono, and GlobalStyles imports those for you. If you switch to Outfit, load it yourself as shown above.

Guidelines

  • Use Outfit for headings and short pieces of text. For long passages, check that the lighter weights stay readable.
  • Stay between Light (300) and Bold (700) in interfaces. The thinnest and heaviest weights are for large display text.
  • Keep tracking tight (slightly negative) on large headings, and leave it at the default for body text.
  • Don't stretch, outline or fake a bold weight. Pick the real weight from the family.