Design Template by Anonymous

Applying Typography in CSS

Now that we understand the foundations of typography, let’s look at how we bring type to life on the web using CSS. Cascading Style Sheets (CSS) is the language used to control visual presentation—including the way our text appears across different devices, browsers, and screen sizes. Good CSS typography isn’t just about looks; it also plays a major role in accessibility and user experience.

Using Web-Safe Fonts and Font Stacks

When choosing fonts, we often rely on web-safe fonts—typefaces that are pre-installed across most devices and operating systems. These include fonts like Arial, Verdana, Georgia, and Courier New. Using them ensures consistent rendering, but they offer limited personality.

To expand your design toolkit, CSS allows you to specify a font stack, listing fonts in order of preference. This way, if the first isn’t available, the browser will fall back to the next:

body {
       font-family: "Helvetica Neue", Arial, sans-serif;
     }

Always end with a generic family like serif or sans-serif to guarantee a backup.

Using Google Fonts and Custom Fonts

Thanks to services like Google Fonts, designers have access to a huge library of free, performance-optimized fonts. To use one, simply include a <link> in your HTML:

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

Then apply it in your CSS:

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

Make sure to only load the weights and styles you need to avoid slowing down your site.

Key CSS Typography Properties

CSS gives us precise control over how text looks and behaves. Let’s break down the most essential properties for styling typography:

• font-family: Specifies the typeface used.
• font-size: Controls how large or small the text is.
• line-height: Sets vertical spacing between lines of text—essential for readability.
• letter-spacing: Adjusts space between letters (also called tracking).
• word-spacing: Adds or reduces space between words.
• text-align: Aligns text left, right, center, or justify.
• font-weight: Sets boldness, typically normal, bold, or numeric values like 400, 700.
• font-style: Controls italic or oblique text styles.
• text-transform: Capitalizes, uppercases, or lowercases text.
• text-indent: Adds indentation to the first line of a paragraph.
• white-space: Controls how text wraps and respects spaces.
• font-variant: Enables small-caps and other typographic effects.

Relative vs. Absolute Units

Font size can be set using absolute units like px (pixels), or relative units like em, rem, and %.

• px: A fixed size. Good for precision but not flexible.
• em: Relative to the parent element’s font size.
• rem: Relative to the root element’s font size. More predictable for consistent scaling.
• %: Relative to the parent’s font size.

For accessibility and responsive design, rem is often the best choice.

Responsive Typography

Typography needs to adapt to different screens and devices. Here’s how to make your text flexible and accessible:

• Use relative units (em, rem) instead of fixed pixels.
• Set base font sizes using the html or body selector.
• Use @media queries to adjust text for smaller or larger screens:

body {
       font-size: 1rem;
     }
     
     @media (max-width: 600px) {
       body {
         font-size: 0.9rem;
       }
     }

Some designers also use fluid typography with clamp(), which lets font size adjust based on viewport width:

h1 {
       font-size: clamp(1.5rem, 4vw, 3rem);
     }

Responsive type ensures that your content stays readable and accessible no matter what device it's viewed on.