CSS Typography

What is typography in CSS?

Typography is the visual system used to present text clearly and consistently. CSS gives you control over font choice, sizing, emphasis, spacing and alignment.

body {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #334155;
}

font-family and fallback fonts

The font-family property chooses the preferred font. A font stack gives the browser fallback options if the first font is unavailable.

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

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

Common generic font families

• sans-serif — clean letterforms without decorative strokes.
• serif — letters with small decorative strokes.
• monospace — every character uses equal horizontal space; useful for code.
• cursive and fantasy — decorative categories; use carefully.

font-size

font-size controls text size. Relative units such as rem work well for scalable typography.

body {
  font-size: 1rem;
}

h1 {
  font-size: 2.5rem;
}

.small-note {
  font-size: 0.875rem;
}

Responsive font sizes with clamp()

Fluid typography can grow with the viewport while staying inside safe minimum and maximum limits.

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

This lets the preferred value respond to viewport width without becoming smaller than 2rem or larger than 4rem.

font-weight

font-weight controls how light or bold text appears. Available numeric weights depend on the actual font files or variable font support.

p {
  font-weight: 400;
}

h2 {
  font-weight: 700;
}

strong {
  font-weight: 700;
}

font-style

font-style is commonly used for normal or italic text.

.quote {
  font-style: italic;
}

Use italics for emphasis or specific editorial meaning, not for long blocks of body text.

line-height

line-height controls the vertical distance between lines. Unitless values scale naturally with the element's font size.

body {
  line-height: 1.6;
}

h1,
h2,
h3 {
  line-height: 1.2;
}

letter-spacing and word-spacing

letter-spacing changes space between characters. word-spacing changes space between words.

.eyebrow {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wide-words {
  word-spacing: 0.15em;
}

text-align

text-align controls inline content alignment inside a block.

.hero {
  text-align: center;
}

.article {
  text-align: left;
}

Center alignment can work for short headings or hero copy. Long paragraphs are usually easier to scan when aligned to the natural reading edge.

Text decoration

Links are commonly underlined because the decoration helps people recognize them as interactive.

a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

text-transform

text-transform changes how text is visually capitalized without changing the original HTML text.

.label {
  text-transform: uppercase;
}

.name {
  text-transform: capitalize;
}

Do not use uppercase for long paragraphs because it can reduce readability.

Readable line length

Very wide paragraphs are difficult to track across the screen. A character-based max width can improve reading comfort.

.article-text {
  max-width: 65ch;
}

Web fonts: basic concept

A browser can use system fonts already installed on the device or load a web font supplied by the website. Web fonts add brand consistency but also add download cost.

@font-face {
  font-family: "MyBrandFont";
  src: url("fonts/my-brand-font.woff2") format("woff2");
  font-display: swap;
}

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

System font stack

A system font stack can avoid a font download and use familiar interface fonts available on the user's device.

body {
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}

Typography and accessibility

• Body text ko unnecessarily tiny mat rakho.
• Text aur background ke beech readable contrast maintain karo.
• Paragraphs ke liye comfortable line-height use karo.
• Long text columns ko sensible width do.
• Important meaning sirf font color ya font style par depend mat karo.
• User zoom ko block mat karo.
• Decorative fonts ko long body copy me avoid karo.

font shorthand

The font shorthand can combine several font-related values, but it resets omitted font sub-properties, so use it carefully.

.intro {
  font: italic 600 1.125rem/1.6 Arial, sans-serif;
}

Typography best practices

• Small, consistent type scale use karo.
• Body font size aur line-height readability ke liye tune karo.
• Font stack me sensible fallback family rakho.
• Too many font weights aur font families load mat karo.
• Heading hierarchy ko CSS size se nahi, correct HTML headings ke saath support karo.
• Long paragraphs ko readable measure do.
• Decorative effects ko content readability se upar priority mat do.

Common beginner mistakes

• Every element ko different font family dena.
• Body text bahut small rakhna.
• Line-height ko too tight rakhna.
• Long paragraphs ko centered align karna.
• All-caps text ka overuse karna.
• External font ke fallback fonts define na karna.
• Too many web font files load karna.
• Only bold/size se semantic heading structure replace karna.