CSS FONTS & TYPOGRAPHY

Typography is one of the most influential elements of UI and UX design. If HTML provides the structure and CSS delivers the style, typography defines the digital “voice” of your content.

Good typography improves readability, enhances aesthetics, and strengthens brand identity.

font-family

This property decides which font should be used to show the text.

What is a font?

A font is the style of the letters.

Example fonts:

• Arial
• Roboto
• Times New Roman
• Poppins

When you write:

font-family: "Roboto", Arial, sans-serif;

It means:

1. “Roboto” → Use this font first (custom/Google font).
2. Arial → If Roboto fails, use Arial.
3. sans-serif → If both fail, use any system default sans-serif font.

What is a fallback?

Fallback = backup font.

font-size

This property sets how big the text looks.

Units:

A. Fixed units (size never changes)

B. Relative units (change based on screen or parent)

C. Keywords

Example:

h1 { 
   font-size: 5vw;/* Text grows/shrinks with screen width */
 }

font-weight

It Controls boldness (thickness) of text.

Keyword values

Numeric weights (exact control)

Example:

h3 { font-weight: 900; }

font-style

It Controls slanted text. The letters are tilted to the right instead of standing straight.

Example:

p {
  font-style: italic;
}

line-height

It Controls space between lines (vertical spacing).

Example:

line-height: 1.5;  /* 1.5 × font size */

letter-spacing

It specify Space between letters.

Example:

letter-spacing: 2px;

word-spacing

It specifies Space between words.

Example:

word-spacing: 10px;

text-transform

It Changes letter case.

Example:

p{
  text-transform: uppercase;
 }

text-align

It Controls horizontal alignment of text.

p{
  text-align: center; /* Text will be written in center of box /*
}

text-decoration

Adds lines like underline, strikethrough, etc.

A. text-decoration-line

B. text-decoration-style

C. text-decoration-color

Any color, like red, blue, green, hex, rgb, etc.

text-shadow

Creates a shadow behind text characters.

Syntax:

text-shadow: <x-offset> <y-offset> <blur-radius> <color>;

Example:

text-shadow: 2px 2px 5px gray;

x-offset (Horizontal Offset)

How far the shadow moves left or right from the text.

• Positive value (e.g., 2px): shadow moves to the right of the text.
• Negative value (e.g., -2px): shadow moves to the left of the text.
• 0px: shadow stays exactly behind the text horizontally.

Defines the horizontal positioning of the shadow.

y-offset (Vertical Offset)

How far the shadow moves up or down from the text.

• Positive value (e.g., 2px): shadow moves downward.
• Negative value (e.g., -2px): shadow moves upward.
• 0px: shadow stays exactly behind the text vertically.

Defines the vertical positioning of the shadow.

blur-radius

How much the shadow spreads and becomes soft.

• 0px: No blur. Shadow stays sharp and solid.
• Higher values (e.g., 5px, 10px):
  • Shadow becomes softer.
  • Edges become fuzzy.
  • Shadow spreads outward.

Blur radius cannot be negative. Controls the softness and spread of the shadow.

color

The color that the shadow uses.

Defines the visual style of the shadow.
Often uses semi-transparent colors to make the shadow look natural.

Multiple Shadows

You can apply more than one shadow by separating them with commas:

text-shadow: 2px 2px 5px black, -2px -2px 5px red;

Each shadow has the same 4 arguments, evaluated independently.

hyphens

Controls breaking long words with a hyphen (-).

Example:

hyphens: auto;

Google Fonts – How They Work

Google Fonts are fonts stored online. You load them using <link> or CSS @import.

Example:

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

Then use:

body {
  font-family: "Poppins", sans-serif;
}