Lesson 13: Mastering Typeface & Font Size

Learn how to create beautiful typography with CSS. Understand font families, sizing techniques, weights, and responsive text strategies for modern web design.

Start Learning

Understanding Font Families

Font families define the visual style of your text. CSS provides several generic font families and allows you to use custom web fonts for more design flexibility.

Serif Fonts: Have small decorative strokes (serifs) at the ends of characters. Best for print and long-form content. Examples: Georgia, Times New Roman.
Sans-serif Fonts: Clean and modern without decorative strokes. Ideal for digital interfaces. Examples: Arial, Helvetica, Open Sans.
Monospace Fonts: All characters have the same width. Great for code and technical content. Examples: Courier, Consolas.
Cursive Fonts: Mimic handwriting with flowing strokes. Use sparingly for decorative purposes. Examples: Brush Script, Comic Sans.

Font Family Comparison

Serif

The quick brown fox jumps over the lazy dog.

1234567890

Merriweather - Ideal for long-form content and editorial designs.

Sans-serif

The quick brown fox jumps over the lazy dog.

1234567890

Inter - Excellent for UI elements and digital interfaces.

Monospace

The quick brown fox jumps over the lazy dog.

1234567890

Roboto Mono - Perfect for code snippets and technical content.

Display

The quick brown fox jumps over the lazy dog.

1234567890

Playfair Display - Elegant choice for headings and titles.

CSS Font Family Syntax

/* Specify a prioritized list of font families */
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* Using generic family names */
h1 {
  font-family: serif;
}

p {
  font-family: sans-serif;
}

code {
  font-family: monospace;
}

/* Using web fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

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

/* Using variable fonts */
@font-face {
  font-family: 'VariableFont';
  src: url('font.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
}

Practical Font Pairing Examples

Serif & Sans-serif

This combination creates a classic, professional look. Use serif for headings and sans-serif for body text to create clear visual hierarchy.

Sans-serif & Monospace

Perfect for technical documentation. Use sans-serif for headings and monospace for code snippets and technical details.

Display & Sans-serif

Ideal for editorial designs. Use a display font for headlines and a clean sans-serif for body text to balance elegance with readability.

Font Sizing Techniques

Choosing the right font size unit is crucial for responsive design. CSS offers several units for sizing text:

16px
Pixels (px)

Absolute unit - fixed size regardless of context

1em
Ems (em)

Relative to parent element's font size

1rem
Rems (rem)

Relative to root (html) element's font size

100%
Percentages (%)

Relative to parent element's font size

1.5vw
Viewport Width (vw)

Relative to viewport width (1vw = 1% of viewport width)

Interactive Font Sizing Demo

Adjust the sliders to see how different units affect font sizes:

Base Size: 16px 8 - 24
Em Size: 1.0em 0.5 - 2.0
Rem Size: 1.0rem 0.5 - 2.0

This text is 16px (absolute)

This text is 1em (relative to parent)

This text is 1rem (relative to root)

This text uses viewport units (1.5vw)

Recommended Base Sizes

Device Type Recommended Base Size Example Usage Desktop 16px - 18px Body text at 16px is comfortable for reading Tablet 17px - 19px Slightly larger for mid-sized screens Mobile 18px - 20px Larger sizes for smaller screens Large Displays 16px with scaling Use rem/em for proportional scaling

Font Size Accessibility

Good Contrast

Text size: 18px on #4caf50

Contrast ratio: 4.8:1

Poor Contrast

Text size: 14px on #9e9e9e

Contrast ratio: 2.1:1

Excellent Contrast

Text size: 16px on #f44336

Contrast ratio: 5.9:1

Font Weight & Style

Beyond size and family, you can control the weight (boldness) and style (italic/oblique) of your fonts.

Font Weight

Font weight ranges from 100 (thin) to 900 (heavy), with 400 as normal and 700 as bold:

Thin (100) - The quick brown fox jumps over the lazy dog
Extra Light (200) - The quick brown fox jumps over the lazy dog
Light (300) - The quick brown fox jumps over the lazy dog
Normal (400) - The quick brown fox jumps over the lazy dog
Medium (500) - The quick brown fox jumps over the lazy dog
Semi Bold (600) - The quick brown fox jumps over the lazy dog
Bold (700) - The quick brown fox jumps over the lazy dog
Extra Bold (800) - The quick brown fox jumps over the lazy dog
Black (900) - The quick brown fox jumps over the lazy dog
/* Font weight examples */
.light-text {
  font-weight: 300;
}

.normal-text {
  font-weight: 400; /* same as 'normal' */
}

.bold-text {
  font-weight: 700; /* same as 'bold' */
}

.heavy-text {
  font-weight: 900;
}

/* Using variable font weights */
.variable-text {
  font-variation-settings: "wght" 450;
}

Font Style & Variable Fonts

Normal

This is normal text without any special styling.

Italic

This text is styled with italics for emphasis.

Oblique

This text is slanted using the oblique style.

Variable Font Demo

Adjust the sliders to see variable font properties in action

Weight: 400 100 - 900
Width: 100% 75% - 125%
Variable Font Magic 
/* Font style examples */
.emphasis {
  font-style: italic;
}

.oblique-text {
  font-style: oblique;
}

.reset-style {
  font-style: normal;
}

/* Variable font implementation */
.variable-font {
  font-family: 'InterVariable', sans-serif;
  font-variation-settings: "wght" 400, "wdth" 100;
}

Practical Applications

Apply typography principles to create readable, accessible, and visually appealing designs.

Line Height & Spacing

Proper line height improves readability. Aim for 1.5-1.7 times the font size for body text.

Tight Spacing (1.2)

This paragraph has tight line spacing which can make longer text difficult to read, especially on smaller screens or for users with visual impairments. The lines feel cramped and crowded together.

Optimal Spacing (1.6)

This paragraph has ideal line spacing that enhances readability. The text breathes naturally, creating a comfortable reading rhythm that doesn't tire the eyes. This is especially important for longer articles and content.

Loose Spacing (2.0)

This paragraph has very loose line spacing which can disconnect related lines of text. While it might work for short poetic verses, it becomes inefficient for longer content as it requires excessive scrolling.

Responsive Typography

Create fluid typography that adapts to different screen sizes using relative units and media queries.

Responsive Heading

This text scales smoothly between different viewport sizes using the clamp() function. Resize this container to see how the text adapts. Clamp() provides a minimum, preferred, and maximum value for fluid sizing.

/* Responsive typography with clamp() */
h1 {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
}

p {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  line-height: 1.6;
}

/* Fluid typography with calc() */
.subheading {
  font-size: calc(1rem + 0.5vw);
}

/* Alternative with media queries */
@media (min-width: 1200px) {
  body {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

Typography Scale

Create visual hierarchy with a consistent typography scale based on ratios like 1.333 (Perfect Fourth).

Caption

0.8rem / 12.8px

Body

1rem / 16px

Subheading

1.333rem / 21.33px

Heading

1.777rem / 28.43px

Title

2.369rem / 37.9px
Performance Tip: When using web fonts, always include font-display: swap; to prevent invisible text during loading.

Typography Utility Classes

Create reusable utility classes for consistent typography across your project:

Extra Small Text (.text-xs)

For captions and fine print

Small Text (.text-sm)

For secondary information

Medium Text (.text-md)

Standard body text size

Large Text (.text-lg)

For lead paragraphs and emphasis

Extra Large Text (.text-xl)

For subheadings and section titles

XXL Text (.text-xxl)

For main headings and page titles 
/* Typography utility classes */
.text-xs { font-size: 0.75rem; }  /* 12px */
.text-sm { font-size: 0.875rem; } /* 14px */
.text-md { font-size: 1rem; }     /* 16px */
.text-lg { font-size: 1.125rem; } /* 18px */
.text-xl { font-size: 1.25rem; }  /* 20px */
.text-xxl { font-size: 1.5rem; }  /* 24px */

/* Responsive utilities */
@media (min-width: 768px) {
  .text-xxl { font-size: 2rem; }  /* 32px on larger screens */
}

/* Font weight utilities */
.font-light { font-weight: 300; }
.font-regular { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }

Best Practices

Follow these guidelines for effective typography in your projects:

Limit Font Families: Use 2-3 complementary fonts maximum to maintain visual harmony and performance.
Prioritize Readability: Ensure sufficient contrast between text and background (minimum 4.5:1 for body text). Test with contrast checkers.
Establish Hierarchy: Use size, weight, and spacing to create clear visual hierarchy. Headings should be 1.5-2.5 times larger than body text.
Responsive First: Design typography to work on all devices using relative units (rem, em) and media queries. Use clamp() for fluid sizing.
Optimize Performance: Use font-display: swap; for web fonts to prevent layout shifts. Subset fonts when possible and use modern formats (woff2).

Font Units Comparison

Unit Type Relative To Best For Caveats px Absolute Screen pixels Precise control Not responsive by default em Relative Parent element Component-level scaling Compounding effect in nested elements rem Relative Root element (html) Global responsive sizing Browser support (IE9+) % Relative Parent element Fluid layouts Similar to em, but percentage-based vw/vh Relative Viewport dimensions Full-viewport typography Can be too large on big screens

Next Steps

Now that you understand typography fundamentals, continue to the next lesson to learn about text transformations and decorations.

Previous Lesson Next Lesson: Text Transformation