CSS Typography

Learn how to style and control text using CSS font families, font sizes, font weights, line height, text alignment, decoration, spacing, transformation, shadows, and responsive typography.

Introduction

In the previous lesson, you learned how CSS width and height control the dimensions of HTML elements.

Now you will learn CSS Typography, which controls how text looks, feels, and behaves inside a website.

Typography includes font families, font sizes, font weights, line spacing, text alignment, decoration, letter spacing, word spacing, text shadows, and responsive text sizing.

Text is one of the most important parts of almost every website. Good typography improves readability, hierarchy, usability, accessibility, and the overall visual quality of a design.

HTML Text

↓

Choose Font Family

↓

Set Font Size

↓

Set Font Weight

↓

Control Line Height

↓

Apply Alignment

↓

Apply Spacing

↓

Add Decoration

↓

Render Final Text

Typography Is More Than Choosing a Font

Good typography combines font selection, size, weight, spacing, line height, alignment, contrast, and responsive behavior.

What is Typography?

Typography is the visual styling and arrangement of text.

In CSS, typography properties control how text appears and how users read it.

Basic Typography

.article {
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
    text-align: left;
}

Property	Controls
font-family	Typeface
font-size	Text size
font-weight	Text thickness
font-style	Normal or italic style
line-height	Space between lines
text-align	Horizontal text alignment
text-decoration	Underline and other decorative lines
text-transform	Uppercase and lowercase conversion
letter-spacing	Space between characters
word-spacing	Space between words
text-shadow	Shadow behind text

Why Do We Need Typography?

Without typography styling, browser default text can look plain and may not create a clear visual hierarchy.

Readability

Proper size and spacing make text easier to read.

Visual Hierarchy

Different sizes and weights show which content is most important.

Brand Identity

Fonts help create a recognizable visual personality.

Responsive Design

Text can adapt to different screen sizes.

Accessibility

Readable typography helps more users understand content.

Better Design

Consistent typography makes interfaces look polished and professional.

Poor Typography

Text is too small.
Lines are too close together.
Too many font families are used.
Hierarchy is unclear.
Long text becomes difficult to read.

Good Typography

Text is comfortably readable.
Line spacing is balanced.
Font choices are consistent.
Headings create clear hierarchy.
Content is easy to scan.

Real-World Analogy

Imagine reading a newspaper.

The newspaper does not use the same text size and style everywhere. Headlines are large and bold, section titles are smaller, and article text is comfortable to read.

Newspaper Element	CSS Typography
Typeface	font-family
Headline size	font-size
Bold headline	font-weight
Italic quotation	font-style
Space between lines	line-height
Centered headline	text-align
Capitalized section name	text-transform
Character spacing	letter-spacing

Typography Hierarchy

┌──────────────────────────────────────┐
│                                      │
│        LARGE BOLD HEADLINE           │
│                                      │
│        Medium Section Heading        │
│                                      │
│  Regular paragraph text with a       │
│  comfortable size and enough line    │
│  spacing for easy reading.           │
│                                      │
└──────────────────────────────────────┘

Headline  → Large + Bold
Heading   → Medium + Semibold
Paragraph → Regular + Comfortable Spacing

Typography Properties

Property	Example	Purpose
font-family	Arial, sans-serif	Select font
font-size	18px	Control text size
font-weight	700	Control thickness
font-style	italic	Apply italic styling
line-height	1.6	Control line spacing
text-align	center	Align text
text-decoration	underline	Add decorative lines
text-transform	uppercase	Change letter case
letter-spacing	2px	Space characters
word-spacing	5px	Space words
text-indent	40px	Indent first line
text-shadow	2px 2px 4px gray	Add text shadow

The font-family Property

The font-family property defines the typeface used to display text.

Syntax

selector {
    font-family: font-name;
}

Example

body {
    font-family: Arial;
}

Fonts Must Be Available

If a font is not installed on the device and is not loaded from a web font source, the browser must use another available font.

Font Family Categories

CSS provides generic font family categories that allow the browser to choose an available font with a similar visual style.

Category	Appearance	Common Use
serif	Letters with decorative strokes	Books and traditional designs
sans-serif	Clean letters without decorative strokes	Modern websites and applications
monospace	Every character has equal width	Programming code
cursive	Handwritten appearance	Decorative content
fantasy	Decorative display style	Special headings

Font Fallbacks

A font stack contains multiple fonts. The browser tries them from left to right until it finds one that is available.

Font Stack

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

Try Arial

↓

If Missing, Try Helvetica

↓

If Missing, Use Available Sans-Serif Font

Fallback Process

Arial Available?
      │
   ┌──┴──┐
  Yes    No
   │      │
Use Arial ▼
      Try Helvetica
           │
        ┌──┴──┐
       Yes    No
        │      │
  Helvetica   ▼
          Use sans-serif

Always End with a Generic Family

A font stack should usually end with a generic family such as sans-serif, serif, or monospace.

Example 1: Font Families

HTML

<h2 class="serif">
    Serif Heading
</h2>

<h2 class="sans">
    Sans-Serif Heading
</h2>

<h2 class="mono">
    Monospace Heading
</h2>

CSS

.serif {
    font-family: Georgia, serif;
}

.sans {
    font-family: Arial, sans-serif;
}

.mono {
    font-family: "Courier New", monospace;
}

The font-size Property

The font-size property controls the size of text.

Syntax

selector {
    font-size: value;
}

Example

h1 {
    font-size: 48px;
}

p {
    font-size: 18px;
}

Font Size Units

Unit	Relative To	Example
px	Fixed CSS pixel	font-size: 18px
em	Parent or current font context	font-size: 1.5em
rem	Root element font size	font-size: 1.5rem
%	Parent font size	font-size: 120%
vw	Viewport width	font-size: 5vw
clamp()	Minimum, preferred, maximum	font-size: clamp(2rem, 5vw, 5rem)

rem Calculation

Root Font Size = 16px

1rem   = 16px
1.5rem = 24px
2rem   = 32px
3rem   = 48px

em Calculation

Parent Font Size = 20px

1em   = 20px
1.5em = 30px
2em   = 40px

rem Is Common for Typography

rem values are commonly used for scalable typography because they are based on the root font size.

Example 2: Font Sizes

HTML

<p class="small">
    Small Text
</p>

<p class="normal">
    Normal Text
</p>

<p class="large">
    Large Text
</p>

CSS

.small {
    font-size: 14px;
}

.normal {
    font-size: 18px;
}

.large {
    font-size: 32px;
}

The font-weight Property

The font-weight property controls the thickness of text characters.

Value	Typical Meaning
100	Thin
200	Extra Light
300	Light
400	Normal
500	Medium
600	Semi Bold
700	Bold
800	Extra Bold
900	Black

Examples

.normal {
    font-weight: 400;
}

.medium {
    font-weight: 500;
}

.semibold {
    font-weight: 600;
}

.bold {
    font-weight: 700;
}

Not Every Font Supports Every Weight

A font family may provide only certain weights. The browser may approximate unavailable weights.

Example 3: Font Weights

The font-style Property

The font-style property controls whether text appears normal, italic, or oblique.

Value	Meaning
normal	Normal text
italic	Uses an italic font style when available
oblique	Slants the text

Example

.normal {
    font-style: normal;
}

.italic {
    font-style: italic;
}

.oblique {
    font-style: oblique;
}

The line-height Property

The line-height property controls the vertical distance between lines of text.

Example

p {
    font-size: 18px;
    line-height: 1.7;
}

Line Height Concept

Line of text
      ↕
  Line Spacing
      ↕
Next line of text

Value	Example
Number	line-height: 1.6
Pixels	line-height: 28px
rem	line-height: 1.8rem
Percentage	line-height: 160%
Normal	line-height: normal

Unitless Line Height Is Flexible

Values such as line-height: 1.5 are commonly preferred because they scale automatically with the element font size.

Example 4: Line Height

HTML

<p class="tight">
    This paragraph has tight line spacing.
    Reading multiple lines may feel crowded.
</p>

<p class="comfortable">
    This paragraph has comfortable line spacing.
    Reading multiple lines becomes easier.
</p>

CSS

.tight {
    line-height: 1;
}

.comfortable {
    line-height: 1.7;
}

The text-align Property

The text-align property controls the horizontal alignment of inline content inside an element.

Value	Behavior
left	Aligns text to the left
right	Aligns text to the right
center	Centers text
justify	Adjusts spacing so lines fill available width
start	Aligns to the logical starting side
end	Aligns to the logical ending side

Examples

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.justify {
    text-align: justify;
}

Example 5: Text Alignment

text-align Affects Inline Content

The property aligns text and other inline content inside the element. It does not directly move the block element itself.

The text-decoration Property

The text-decoration property adds or removes decorative lines from text.

Value	Effect
none	No decorative line
underline	Line below text
overline	Line above text
line-through	Line through text

Examples

.underline {
    text-decoration: underline;
}

.deleted {
    text-decoration: line-through;
}

.link {
    text-decoration: none;
}

Text Decoration Controls

Modern CSS provides individual properties for controlling the style, color, and thickness of text decoration.

Custom Underline

.link {
    text-decoration-line: underline;
    text-decoration-color: #6c5ce7;
    text-decoration-style: wavy;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

The text-transform Property

The text-transform property changes the displayed letter case without changing the original HTML text.

Value	Effect
none	No transformation
uppercase	ALL LETTERS UPPERCASE
lowercase	all letters lowercase
capitalize	First Letter Of Each Word Capitalized

Examples

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

The letter-spacing Property

The letter-spacing property controls the horizontal space between characters.

Examples

.normal {
    letter-spacing: normal;
}

wide {
    letter-spacing: 4px;
}

.tight {
    letter-spacing: -1px;
}

Do Not Overuse Letter Spacing

Too much or too little character spacing can make text difficult to read.

The word-spacing Property

The word-spacing property controls the horizontal space between words.

Example

.text {
    word-spacing: 10px;
}

The text-indent Property

The text-indent property controls the indentation of the first line of text.

Example

p {
    text-indent: 50px;
}

The text-shadow Property

The text-shadow property adds one or more shadows behind text.

Syntax

text-shadow:
    horizontal-offset
    vertical-offset
    blur-radius
    color;

Example

h1 {
    text-shadow: 2px 2px 5px gray;
}

Shadow Values

2px  → Horizontal Offset
2px  → Vertical Offset
5px  → Blur Radius
gray → Shadow Color

Example 6: Text Shadow

Keep Text Shadows Subtle

Heavy shadows can reduce readability. Use them carefully and maintain enough contrast between text and background.

The white-space Property

The white-space property controls how spaces, tabs, and line breaks are handled inside text.

Value	Behavior
normal	Collapses spaces and wraps text
nowrap	Collapses spaces but prevents wrapping
pre	Preserves spaces and line breaks
pre-wrap	Preserves spaces and allows wrapping
pre-line	Collapses spaces but preserves line breaks

Prevent Wrapping

.title {
    white-space: nowrap;
}

Text Overflow with Ellipsis

Long single-line text can be shortened visually using an ellipsis.

HTML

<div class="title">
    This is a very long article title that cannot fit inside the available space.
</div>

CSS

.title {
    width: 300px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Long Text

↓

Prevent Wrapping

↓

Hide Overflow

↓

Apply Ellipsis

↓

Display Shortened Text

Breaking Long Words

Long words and URLs can overflow narrow containers. CSS provides properties to control how they break.

Recommended Flexible Breaking

.content {
    overflow-wrap: break-word;
}

Aggressive Breaking

.content {
    word-break: break-all;
}

Property	Behavior
overflow-wrap: break-word	Breaks long content when necessary
word-break: normal	Uses normal language breaking rules
word-break: break-all	Can break between almost any characters

Prefer Natural Breaking

overflow-wrap: break-word is usually more readable than breaking every word aggressively.

The font Shorthand

The font shorthand property combines several font properties into one declaration.

Long Form

.text {
    font-style: italic;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
    font-family: Arial, sans-serif;
}

Shorthand

.text {
    font: italic 700 20px/1.5 Arial, sans-serif;
}

Shorthand Order

font:
│
├── font-style
├── font-weight
├── font-size
├── /
├── line-height
└── font-family

font-size and font-family Are Required

The font shorthand requires at least a font-size and font-family. It can also reset omitted font-related properties.

Web-Safe Fonts

Web-safe fonts are commonly available across many operating systems and devices.

Font	Category
Arial	Sans-serif
Verdana	Sans-serif
Tahoma	Sans-serif
Trebuchet MS	Sans-serif
Times New Roman	Serif
Georgia	Serif
Courier New	Monospace

Example Font Stacks

.modern {
    font-family: Arial, Helvetica, sans-serif;
}

.editorial {
    font-family: Georgia, "Times New Roman", serif;
}

.code {
    font-family: "Courier New", Courier, monospace;
}

Using Web Fonts

Web fonts allow websites to use fonts that may not be installed on the user device.

Imported Web Font Example

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

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

Browser Loads Page

↓

CSS Requests Font

↓

Font File Downloads

↓

Browser Loads Typeface

↓

Text Renders with Web Font

Font Loading Affects Performance

Each additional font family and weight can require more font files. Load only the styles that the website actually needs.

Using @font-face

The @font-face rule allows a website to load custom font files directly.

Custom Font

@font-face {
    font-family: 'MyFont';
    src: url('/fonts/my-font.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

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

Font Loading Structure

public/
└── fonts/
    ├── my-font-regular.woff2
    ├── my-font-medium.woff2
    └── my-font-bold.woff2

Multiple Weights

@font-face {
    font-family: 'MyFont';
    src: url('/fonts/my-font-regular.woff2') format('woff2');
    font-weight: 400;
}

@font-face {
    font-family: 'MyFont';
    src: url('/fonts/my-font-bold.woff2') format('woff2');
    font-weight: 700;
}

Responsive Typography

Responsive typography changes text sizes according to the available screen space.

Media Query Approach

.hero-title {
    font-size: 64px;
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 42px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 32px;
    }
}

Responsive Behavior

Desktop
┌──────────────────────────────────┐
│       LARGE HERO TITLE           │
└──────────────────────────────────┘

Tablet
┌──────────────────────────┐
│    Medium Hero Title     │
└──────────────────────────┘

Mobile
┌───────────────────┐
│ Small Hero Title  │
└───────────────────┘

Typography with clamp()

The clamp() function can create fluid text that grows and shrinks smoothly between minimum and maximum sizes.

Fluid Heading

.hero-title {
    font-size: clamp(2rem, 5vw, 5rem);
}

How clamp() Works

Minimum Size  = 2rem
Preferred Size = 5vw
Maximum Size  = 5rem

Small Screen
      │
      ▼
Never Below 2rem

Medium Screen
      │
      ▼
Uses Fluid 5vw Value

Large Screen
      │
      ▼
Never Above 5rem

Fluid Typography

clamp() can reduce the need for multiple font-size media queries by allowing text to scale smoothly between limits.

Complete Typography Example

The following example combines several typography properties to create a modern article card.

HTML

<article class="article-card">
    <span class="category">
        CSS GUIDE
    </span>

    <h1>
        Master Modern CSS Typography
    </h1>

    <p class="meta">
        12 min read
    </p>

    <p class="description">
        Learn how to create readable,
        responsive, and visually balanced
        text for modern websites.
    </p>

    <a href="#">
        Read Article
    </a>
</article>

CSS

.article-card {
    width: 100%;
    max-width: 650px;

    padding: 40px;

    margin: 30px auto;

    font-family: Arial, sans-serif;

    border: 1px solid #dfe6e9;
    border-radius: 16px;
}

.category {
    font-size: 0.8rem;
    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #6c5ce7;
}

.article-card h1 {
    margin: 16px 0;

    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;

    line-height: 1.1;

    letter-spacing: -1px;
}

.meta {
    font-size: 0.9rem;

    color: #636e72;
}

.description {
    font-size: 1.1rem;

    line-height: 1.7;

    color: #2d3436;
}

.article-card a {
    display: inline-block;

    margin-top: 12px;

    font-weight: 600;

    color: #6c5ce7;

    text-decoration: underline;
    text-underline-offset: 5px;
}

Browser Rendering Flow

The browser performs several steps before displaying styled text.

Read HTML Text

↓

Read CSS Typography

↓

Resolve Font Family

↓

Load Required Font

↓

Calculate Font Size

↓

Apply Weight and Style

↓

Calculate Line Height

↓

Apply Spacing

↓

Apply Alignment

↓

Paint Text

Typography Rendering Process

HTML Text
    │
    ▼
Read Typography CSS
    │
    ▼
Find Font Family
    │
    ├── Font Available
    │       │
    │       ▼
    │    Use Font
    │
    └── Font Missing
            │
            ▼
       Try Fallback Font
            │
            ▼
Calculate Font Size
            │
            ▼
Apply Weight + Style
            │
            ▼
Calculate Line Height
            │
            ▼
Apply Character Spacing
            │
            ▼
Apply Word Spacing
            │
            ▼
Apply Alignment
            │
            ▼
Render Final Text

Real-World Applications

Articles

Use readable body text, headings, and line spacing.

Product Pages

Create hierarchy between product names, prices, and descriptions.

Applications

Style buttons, labels, navigation, and interface text.

Landing Pages

Create powerful responsive hero headings.

Documentation

Combine readable text with monospace code fonts.

Cards

Create clear hierarchy between category, title, and description.

Navigation

Style menu labels with weight, spacing, and transformation.

Badges

Use uppercase text and letter spacing for compact labels.

Advantages

Better Readability

Proper font sizes and line heights make content easier to read.

Clear Hierarchy

Size and weight help users understand content importance.

Strong Branding

Font choices contribute to visual identity.

Responsive Text

Typography can adapt to different screen sizes.

Better Accessibility

Readable and scalable text supports more users.

Professional Design

Consistent typography improves visual quality.

Better Scanning

Clear headings and spacing help users find information quickly.

Reusable Systems

Typography scales can be reused across entire applications.

Common Beginner Mistakes

Using Too Many Font Families

Too many fonts create visual inconsistency and increase loading requirements.

Text That Is Too Small

Very small body text can be difficult to read, especially on mobile devices.

Huge Text Everywhere

Large text loses its impact when every element is oversized.

No Visual Hierarchy

Using the same size and weight everywhere makes content difficult to scan.

Tight Line Height

Lines that are too close together make paragraphs uncomfortable to read.

Excessive Line Height

Too much space between lines can disconnect related text.

Long Text Lines

Very wide paragraphs can be difficult for the eye to follow.

Excessive Letter Spacing

Too much spacing between characters reduces readability.

Negative Letter Spacing Everywhere

Tight spacing can cause characters to appear crowded or overlap.

Using Uppercase for Long Paragraphs

Large blocks of uppercase text are harder to read.

Centering Long Paragraphs

Centered alignment makes long multi-line text harder to scan.

Removing Link Underlines Without Replacement

Links may become difficult to distinguish from regular text.

Using Heavy Text Shadows

Strong shadows can reduce clarity and readability.

Loading Every Font Weight

Unused font files increase page loading requirements.

No Fallback Font

Text may render unpredictably if the preferred font cannot load.

Forgetting Generic Font Families

Font stacks should usually end with a generic fallback.

Using Fixed Large Headings on Mobile

Large desktop heading sizes may overflow small screens.

Using vw Without Limits

Viewport-based text can become too small or too large without minimum and maximum limits.

Ignoring Font Performance

Many font families and weights can increase loading time.

Using font Shorthand Without Understanding Resets

The font shorthand can reset font properties that were not explicitly included.

Best Practices

Choose readable font families.
Use a consistent font system across the website.
Limit the number of font families.
Use font fallbacks.
End font stacks with a generic font family.
Use quotes around font names containing spaces.
Choose font sizes according to content importance.
Create a clear typography hierarchy.
Make headings visually different from body text.
Use font weight to create emphasis.
Do not make every element bold.
Use numeric font weights when precise control is useful.
Load only font weights that are actually used.
Check whether the selected font supports required weights.
Use italic text selectively.
Avoid large blocks of italic text.
Use comfortable body text sizes.
Test body text on mobile screens.
Use relative units when scalable typography is required.
Use rem for consistent root-relative sizing.
Understand how em depends on font context.
Use unitless line-height for flexible typography.
Use comfortable line height for paragraphs.
Use tighter line height for large headings when appropriate.
Avoid extremely tight paragraph line spacing.
Avoid excessive paragraph line spacing.
Limit paragraph width for comfortable reading.
Do not make long paragraphs unnecessarily wide.
Use left or logical start alignment for long body text.
Use centered text mainly for short content.
Use right alignment only when the design requires it.
Use justify carefully.
Use text-transform for visual presentation.
Do not manually rewrite content just to change display case.
Avoid long uppercase paragraphs.
Use uppercase carefully for labels and small headings.
Use letter spacing carefully.
Use wider letter spacing for small uppercase labels when appropriate.
Avoid excessive spacing in body text.
Use negative letter spacing carefully for large headings.
Use word spacing only when necessary.
Use text indentation when it improves the reading style.
Use text decoration consistently.
Keep links visually recognizable.
Do not remove link underlines without another clear visual indicator.
Use text-underline-offset for improved underline appearance.
Use decoration thickness carefully.
Keep text shadows subtle.
Maintain strong contrast between text and background.
Do not use shadows as a replacement for readable contrast.
Use white-space carefully.
Use nowrap only when content must remain on one line.
Use ellipsis for limited single-line content.
Remember that ellipsis requires overflow control.
Allow important text to remain fully accessible.
Use overflow-wrap for long words and URLs.
Avoid aggressive word breaking unless necessary.
Use responsive typography.
Reduce oversized headings on smaller screens.
Use clamp() for fluid typography when appropriate.
Set minimum sizes for fluid text.
Set maximum sizes for fluid text.
Do not use unrestricted viewport font sizing.
Test typography at different viewport widths.
Test typography with browser zoom.
Test typography with longer content.
Test typography with shorter content.
Test translated content.
Test uppercase content.
Test long words and URLs.
Test text inside narrow containers.
Test text inside buttons.
Allow buttons to grow for longer labels.
Do not force text into fixed heights.
Use natural content height.
Avoid clipping important text.
Use semantic HTML headings.
Do not choose heading levels only for visual size.
Use CSS to style semantic heading elements.
Create reusable typography classes or design tokens.
Use CSS variables for repeated font families.
Use CSS variables for repeated font sizes.
Use CSS variables for repeated line heights.
Use CSS variables for repeated font weights.
Keep typography values consistent.
Avoid random font sizes across similar components.
Avoid random line heights across similar content.
Use a typography scale.
Keep body text consistent.
Keep heading styles consistent.
Keep label styles consistent.
Keep button typography consistent.
Use monospace fonts for code.
Use readable fonts for long articles.
Use decorative fonts only where appropriate.
Do not use decorative fonts for large amounts of body text.
Optimize web font loading.
Prefer modern font formats such as WOFF2 when self-hosting.
Load only required character sets when possible.
Avoid unnecessary @import font chains in performance-sensitive applications.
Use local font optimization features provided by frameworks when available.
Provide fallback fonts with similar proportions when possible.
Check layout changes while web fonts load.
Inspect computed typography using developer tools.
Check the final font family.
Check the final font size.
Check the final font weight.
Check the final line height.
Check inherited typography properties.
Check whether a rule is being overridden.
Keep typography readable.
Keep typography responsive.
Keep typography consistent.

Readability Comes First

A beautiful font is not useful if users struggle to read the content. Prioritize readable sizes, comfortable spacing, clear hierarchy, and sufficient contrast.

Frequently Asked Questions

What is CSS typography?

CSS typography is the styling and arrangement of text using properties such as font-family, font-size, font-weight, line-height, alignment, spacing, and decoration.

What does font-family do?

font-family defines the typeface used to display text.

Why should I use font fallbacks?

Fallbacks allow the browser to use another suitable font if the preferred font is unavailable or fails to load.

What is a generic font family?

A generic family is a broad font category such as sans-serif, serif, or monospace that allows the browser to choose an available font.

What does font-size do?

font-size controls the size of text.

Should I use px or rem for font sizes?

Both can be used, but rem is commonly chosen for scalable root-relative typography.

What does 1rem mean?

1rem equals the font size of the root html element.

What does 1em mean?

1em is relative to the relevant font-size context, often the font size of the parent for font-size calculations.

What does font-weight do?

font-weight controls the thickness or boldness of text.

Is font-weight: 700 the same as bold?

700 commonly represents the bold weight.

Why does font-weight sometimes look the same?

The selected font may not provide all requested weights, so the browser may use or approximate the nearest available weight.

What does font-style do?

font-style controls normal, italic, or oblique text styling.

What does line-height do?

line-height controls the vertical spacing between lines of text.

Should line-height have a unit?

Unitless values such as 1.5 are commonly useful because they scale with the font size.

What does text-align do?

text-align controls the horizontal alignment of inline content inside an element.

Does text-align: center center the element itself?

No. It centers inline content inside the element. It does not directly center the block element.

What does text-decoration do?

text-decoration adds or removes decorative lines such as underlines, overlines, and line-through effects.

How do I remove a link underline?

Use text-decoration: none, but ensure links remain visually distinguishable and accessible.

What does text-transform do?

text-transform changes the displayed letter case using values such as uppercase, lowercase, and capitalize.

Does text-transform change the original HTML text?

No. It changes only the visual presentation.

What does letter-spacing do?

letter-spacing controls the horizontal space between characters.

What does word-spacing do?

word-spacing controls the horizontal space between words.

What does text-indent do?

text-indent controls the indentation of the first line of text.

What does text-shadow do?

text-shadow adds one or more shadows behind text.

How do I prevent text from wrapping?

Use white-space: nowrap.

How do I show three dots for overflowing text?

For a single line, commonly combine white-space: nowrap, overflow: hidden, and text-overflow: ellipsis.

How do I break a long URL?

overflow-wrap: break-word can allow long content to break when necessary.

What is the font shorthand property?

The font shorthand combines multiple font-related properties such as style, weight, size, line height, and family.

What are web-safe fonts?

Web-safe fonts are fonts commonly available across many systems and devices.

What is a web font?

A web font is downloaded by the browser so a website can use a typeface that may not be installed on the device.

What does @font-face do?

@font-face allows CSS to define and load custom font files.

What is responsive typography?

Responsive typography adapts text sizing and spacing to different screen sizes.

Can clamp() be used for font sizes?

Yes. clamp() is commonly used to create fluid typography with minimum and maximum limits.

What is a good pattern for responsive headings?

A common pattern is font-size: clamp(minimum, preferred fluid value, maximum).

Why should I limit paragraph width?

Very long lines make it harder for the eye to move from the end of one line to the beginning of the next.

How many font families should a website use?

There is no strict limit, but using a small and consistent set usually creates better design consistency and performance.

How can I debug typography?

Use browser developer tools to inspect the computed font family, size, weight, line height, spacing, inheritance, and overridden rules.

What comes after CSS Typography?

The next lesson covers the CSS display property, including block, inline, inline-block, none, visibility, element flow, and how display affects layout.

Key Takeaways

Typography controls the visual presentation and arrangement of text.
font-family selects the typeface.
Font stacks provide fallback options.
Generic font families include serif, sans-serif, and monospace.
font-size controls text size.
rem is relative to the root font size.
em depends on the relevant font-size context.
font-weight controls text thickness.
font-style controls normal, italic, and oblique text.
line-height controls vertical spacing between text lines.
Unitless line height scales with font size.
text-align controls horizontal alignment of inline content.
text-decoration adds decorative text lines.
text-transform changes the displayed letter case.
letter-spacing controls space between characters.
word-spacing controls space between words.
text-indent controls first-line indentation.
text-shadow adds shadows behind text.
white-space controls wrapping and whitespace behavior.
text-overflow can display an ellipsis for clipped text.
overflow-wrap helps handle long words and URLs.
The font shorthand combines multiple font properties.
Web fonts allow custom typefaces to be downloaded.
@font-face loads custom font files.
Responsive typography adapts to screen size.
clamp() creates fluid text with minimum and maximum limits.
Readable typography requires proper size, spacing, hierarchy, and contrast.

Summary

CSS Typography controls how text looks, feels, and behaves inside a website.

The font-family property selects the typeface, while font stacks provide fallback options when the preferred font is unavailable.

The font-size property controls text size using units such as pixels, rem, em, percentages, and viewport-based values.

The font-weight and font-style properties control text thickness and styles such as italic or oblique.

The line-height property controls vertical spacing between lines and plays an important role in paragraph readability.

The text-align property controls horizontal text alignment, while text-decoration adds underlines, overlines, and line-through effects.

The text-transform property changes the displayed letter case without modifying the original HTML content.

Letter spacing and word spacing control the horizontal space between characters and words.

The text-shadow property can add visual depth, but shadows should remain subtle enough to preserve readability.

The white-space, text-overflow, overflow-wrap, and word-break properties help control wrapping and overflowing text.

Web fonts and the @font-face rule allow websites to use custom typefaces that are not installed on the user device.

Responsive typography adapts text to different screen sizes using media queries or fluid functions such as clamp().

Good typography combines readable fonts, appropriate sizes, comfortable line spacing, clear hierarchy, strong contrast, and responsive behavior.

In the next lesson, you will learn the CSS display property, including block, inline, inline-block, none, visibility, element flow, and how display affects layout.