Master text styling and font properties for beautiful typography.
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. In CSS, typography involves controlling fonts, sizes, spacing, and text appearance.
Specify which font to use for text.
/* Single font */
body {
font-family: Arial;
}
/* Font stack with fallbacks */
body {
font-family: 'Arial', 'Helvetica', sans-serif;
}
/* Web fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}This text uses a serif font. Serif fonts have small lines at the ends of characters.
This text uses a sans-serif font. Sans-serif fonts don't have the small lines.
This text uses a monospace font. Each character has the same width.
Control the size of text.
/* Absolute units */
.large-text {
font-size: 24px;
}
.medium-text {
font-size: 16px;
}
.small-text {
font-size: 12px;
}
/* Relative units */
.responsive-text {
font-size: 1.2rem; /* 1.2 times the root font size */
font-size: 1.5em; /* 1.5 times the parent font size */
font-size: 2vw; /* 2% of viewport width */
}Large text (32px)
Medium-large text (24px)
Normal text (16px)
Small text (14px)
Very small text (12px)
Control the thickness of text.
/* Numeric values */
.light-text {
font-weight: 300;
}
.normal-text {
font-weight: 400;
}
.medium-text {
font-weight: 500;
}
.semi-bold-text {
font-weight: 600;
}
.bold-text {
font-weight: 700;
}
.extra-bold-text {
font-weight: 800;
}
/* Keyword values */
.lighter { font-weight: lighter; }
.normal { font-weight: normal; }
.bold { font-weight: bold; }
.bolder { font-weight: bolder; }Thin text (100)
Light text (300)
Normal text (400)
Medium text (500)
Semi-bold text (600)
Bold text (700)
Extra-bold text (900)
Control the style of text.
/* Normal text */
.normal {
font-style: normal;
}
/* Italic text */
.italic {
font-style: italic;
}
/* Oblique text (similar to italic) */
.oblique {
font-style: oblique;
}Normal text style
Italic text style
Oblique text style
Control how text is aligned within its container.
/* Left alignment (default) */
.left-align {
text-align: left;
}
/* Center alignment */
.center-align {
text-align: center;
}
/* Right alignment */
.right-align {
text-align: right;
}
/* Justified text */
.justify {
text-align: justify;
}This text is left-aligned. It's the default alignment for most languages.
This text is center-aligned. It's often used for headings and titles.
This text is right-aligned. It's common in some languages and layouts.
This text is justified. It creates even edges on both sides by adjusting word spacing.
Control the spacing between lines of text.
/* Numeric value (recommended) */
.normal-line-height {
line-height: 1.5;
}
/* Unit value */
.specific-line-height {
line-height: 24px;
}
/* Percentage */
.percentage-line-height {
line-height: 150%;
}
/* Normal keyword */
.default-line-height {
line-height: normal;
}This text has tight line spacing. It's useful for headings and compact layouts. The lines are closer together, making the text more condensed.
This text has normal line spacing. It's comfortable to read and is commonly used for body text. The spacing makes it easy on the eyes.
This text has loose line spacing. It's very open and airy, often used for elegant layouts or when you want to emphasize readability.
Add decorative elements to text.
/* Underline */
.underline {
text-decoration: underline;
}
/* Overline */
.overline {
text-decoration: overline;
}
/* Line through */
.line-through {
text-decoration: line-through;
}
/* Multiple decorations */
.multiple {
text-decoration: underline overline;
}
/* No decoration */
.no-decoration {
text-decoration: none;
}
/* Decoration color and style */
.fancy-underline {
text-decoration: underline;
text-decoration-color: red;
text-decoration-style: wavy;
text-decoration-thickness: 3px;
}Underlined text
Overlined text
Strikethrough text
Underlined and overlined text
Fancy wavy red underline
Use web fonts from Google Fonts for better typography.
/* In HTML head */
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
/* In CSS */
body {
font-family: 'Inter', sans-serif;
}
.heading {
font-family: 'Inter', sans-serif;
font-weight: 700;
}/* Font display options */
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2');
font-display: swap; /* Show fallback immediately, swap when loaded */
}
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2');
font-display: fallback; /* Show fallback for 100ms, then swap */
}
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2');
font-display: optional; /* Use fallback if font not loaded in 100ms */
}/* Base font size */
html {
font-size: 16px;
}
/* Responsive typography */
body {
font-size: 1rem; /* 16px */
line-height: 1.6;
}
h1 {
font-size: 2.5rem; /* 40px */
line-height: 1.2;
}
h2 {
font-size: 2rem; /* 32px */
line-height: 1.3;
}
/* Mobile adjustments */
@media (max-width: 768px) {
h1 {
font-size: 2rem; /* 32px */
}
h2 {
font-size: 1.5rem; /* 24px */
}
}