Typography

We'll be using two fonts in this project:

• Outfit
• Fira Sans

We'll keep it simple, linking to the Google fonts in the head of our HTML file:

<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=Fira+Sans:wght@400;700&family=Outfit:wght@100..900&display=swap"
  rel="stylesheet"
/>

If you'd like a bit of a bonus challenge, I'd encourage you to self-host the fonts and use @font-face to bring them into your project.

Naming conventions

As with colors, you'll want to use a consistent naming convention.

I always prefix these with a two letter shorthand, so font-size values will be --fs-*, and font-family ones will be --ff-*, and so on.

It saves a few keystrokes, and makes it very easy to find the specific custom properties you want in VS Code, because as soon as you type --ff, you'll only see a list of all the font-family custom properties that you've created.

I use a similar numbering system to what I use for my colors, except I have 400 be the value that will be used for my body.

The main reason I do that is it gives me a little room for smaller sizes, which you generally won't have many of, and then a lot of larger sizes.

Media queries and custom properties

One big advantage of custom properties is that we can change their values within media queries.

This is super useful when we have font sizes that change between the large and small designs, and something that I like to leverage as much as possible.

We can also keep it a little cleaner now that we have nesting in native CSS, where we can have the media query inside out :root.

The custom props I'll be using

For both my colors and font-related custom properties, this is the system that I like to use. If you have another way that you'd prefer to work, please go for it!

:root {
  /* colors here */

  --ff-heading: "Outfit", sans-serif;
  --ff-body: "Fira Sans", sans-serif;

  --fs-300: 0.875rem;
  --fs-400: 1rem;
  --fs-500: 1.125rem;
  --fs-600: 1.25rem;
  --fs-700: 1.5rem;
  --fs-800: 2rem;
  --fs-900: 3.75rem;
  --fs-1000: 3.75rem;

  @media (width > 760px) {
    --fs-300: 0.875rem;
    --fs-400: 1rem;
    --fs-500: 1.25rem;
    --fs-600: 1.5rem;
    --fs-700: 2rem;
    --fs-800: 3rem;
    --fs-900: 5rem;
    --fs-1000: 7.5rem;
  }
}