CSS Typography

A comprehensive guide to typography in CSS, including web fonts, custom fonts, font loading strategies, and using font icons.

Typography plays a crucial role in web design by ensuring readability and enhancing user experience. This guide will help you understand how to use web fonts, custom fonts, and font icons in your CSS design.

🌐 What is Typography in CSS?

Typography refers to the style, arrangement, and appearance of text on a webpage. Proper use of typography helps enhance readability, accessibility, and user experience. CSS provides various methods to control fonts, including web fonts, custom fonts, font loading, and the use of font icons.

🖋️ Web Fonts and Google Fonts

Web fonts allow you to use custom fonts that are not installed on a user's device. One of the most popular services for web fonts is Google Fonts, which offers a large library of free fonts to integrate into your web design.

Using Google Fonts:

To use a Google font, you can add a <link> to the font in your HTML <head> section:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Then, in your CSS, you can apply the font:

body {
  font-family: 'Roboto', sans-serif;
}

Benefits:

No need to depend on fonts installed on the user's machine.
Easily add various font styles (e.g., regular, bold, italic).

🖋️ `@font-face` Rule

The @font-face rule allows you to define custom fonts directly within your CSS. This method provides more control and flexibility over fonts used on your website.

Syntax:

@font-face {
  font-family: 'MyCustomFont';
  src: url('path-to-font/font.woff2') format('woff2'),
       url('path-to-font/font.woff') format('woff');
}

Once you define the custom font, you can use it in your styles:

body {
  font-family: 'MyCustomFont', sans-serif;
}

Benefits:

Enables the use of custom fonts from local or external sources.
Great for branding and unique design.
Supports different font file formats (e.g., WOFF, TTF, OTF).

🖋️ Font Loading and Performance Considerations

While web fonts are fantastic for enhancing your design, they can impact your website's performance, especially if the fonts take too long to load. It's essential to optimize font loading to improve page speed.

Font Loading Strategies:

Font Display Property: You can control how fonts are displayed during loading using the font-display property.
- auto: Default behavior.
- block: Gives the font time to load before rendering.
- swap: Displays fallback fonts until the custom font loads.
- fallback: Similar to swap, but the fallback font will be used for a shorter time.
- optional: The font may not load, providing a fallback immediately.

@font-face {
  font-family: 'MyCustomFont';
  src: url('path-to-font/font.woff2');
  font-display: swap;
}

Subset Fonts: Load only the characters you need instead of the full character set (e.g., only the Latin alphabet for an English website).
Preloading Fonts: Use the <link rel="preload"> tag to preload critical fonts.

<link rel="preload" href="path-to-font/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

By using these methods, you can minimize the impact of font loading on performance.

🖋️ Font Icons (Font Awesome, Material Icons)

Font icons are a popular choice for adding vector-based icons to websites. They are scalable, customizable with CSS, and lightweight.

Font Awesome:

Font Awesome is a widely used library that provides scalable vector icons. You can integrate Font Awesome by adding a CDN link in your HTML <head>:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">

Then, use icons in HTML:

<i class="fas fa-home"></i> Home

Material Icons:

Material Icons is another popular icon library, provided by Google, that can be used similarly. To add Material Icons:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

And use them like this:

<i class="material-icons">home</i>

Benefits of Font Icons:

Scalable without losing quality.
Easy to style with CSS (size, color, shadows, etc.).
Fewer HTTP requests than using image icons.

🧑‍🎨 Key Takeaways

Google Fonts allows you to easily integrate external web fonts into your project for a consistent look across devices.

🧪 Try Yourself

export default function App() {
  return <h1>Hello world</h1>
}

Open Sandbox

CSS Typography

On this page