Small (0.875rem)
Large (1.25rem)
Pixels are fine for icons, but use rem for text. It respects the user's browser settings and keeps your layout accessible.
1. The Fundamentals
These are the knobs you'll turn most often. Size, weight, and line-height form the triplet that defines how "heavy" a block of text feels on the page.
Bold Text (700)
Medium Text (500)
Numeric weights give you more precision than keywords like bold. Note that a font must actually have these weights available in its file.
This text uses a 1.8 line-height. It feels much airier than the browser default and is generally easier to read for long paragraphs.
A unitless value (like 1.5 or 1.6) is usually better than a fixed pixel height because it scales with font size changes.
Italic text for emphasis
The italic style is used for emphasis. Use it sparingly to highlight key terms or quotes.
.text-basics {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.6;
font-style: italic;
}2. Spacing & Flow
If text feels crowded, the problem is often the horizontal space. Tightening letter spacing on headings makes them feel more authoritative; loosening it on all-caps labels makes them much easier to read.
TRACKED OUT
Tightened Heading
Looser spacing helps readability for uppercase labels. Tightening it slightly (-0.02em) helps large headings look more cohesive.
Looser word spacing here.
Rarer than letter-spacing, but useful for stylized layouts where you want a very open, airy feel between words.
The first line of this paragraph is pushed in. This is a classic print technique that's useful for long-form articles.
Indicates the start of a new paragraph without needing extra vertical space. Traditional in print, less common on the modern web.
/* Letter spacing: loose for caps, tight for headings */
.tracked-out { letter-spacing: 0.15em; }
.tight-heading { letter-spacing: -0.02em; }
/* Word spacing - open, airy feel */
.airy-text { word-spacing: 0.5rem; }
/* First-line indent (classic print style) */
.indent-paragraph { text-indent: 2rem; }3. Custom Fonts & Fallbacks
Web fonts give your site character. The key is picking the right category for the job and always providing a fallback font so the site doesn't look broken if the custom font fails to load.
Editorial Style
Serifs have small strokes at the ends of characters. They feel traditional, elegant, and are great for storytelling or luxury brands.
System Minimal
Sans-serifs are clean and modern. Inter is specifically designed for UI, making it highly readable even at small sizes on screens.
const greet = "hi";
Every character has the same width. Necessary for code and great for labels, timestamps, or technical data where alignment matters.
/* Always end with a generic fallback family */
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
h1 {
font-family: 'Playfair Display', Georgia, serif;
}4. Responsive Text
Hard-coding font sizes doesn't work when your interface has to run on everything from a watch to a 50-inch TV. Modern CSS gives us tools to let text fluidly resize itself between a minimum and maximum value.
Resize the window!
clamp() takes three values: min, ideal, max. The text stays mobile-friendly but grows smoothly as the viewport gets wider.
BIG
Using vw (viewport width) makes text directly proportional to the screen size. Perfect for high-impact hero headings.
/* fluid-size: min 16px, ideal 5vw, max 40px */
.responsive-heading {
font-size: clamp(1rem, 5vw, 2.5rem);
}5. Alignment & Wrapping
How text behaves when it hits the edge of its container is what makes or breaks a layout. You can force it to stays on one line, wrap it into columns, or justify it like a newspaper.
This text automatically flows into two separate columns. It's great for maximizing space when you have long lists or editorial content that needs to feel premium.
The column-count property is surprisingly simple. The browser handles the flow and balancing automatically.
This is a very long sentence that will definitely wrap if we don't truncate it.
A combination of white-space: nowrap and text-overflow: ellipsis keeps your UI tidy by cutting off text that's too long.
Justified text spreads words to touch both left and right edges. Best used with hyphens: auto to avoid "rivers" of white space between words.
Mostly seen in print. On the web, use it carefully as it can occasionally create awkward spacing issues on narrow screens.
/* Multi-column layout */
.columns-2 {
column-count: 2;
column-gap: 2rem;
}
/* Single-line truncation with ellipsis */
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Justified text (use with hyphens: auto to reduce rivers) */
.justified {
text-align: justify;
hyphens: auto;
}6. Decoration & Style
Modern CSS has moved past simple underlines. You can now control the color, thickness, and offset of your text decorations, or use standard transforms to change case without changing the actual source text.
Styled Underline
Customize the style (wavy), color (primary), and offset. It makes links feel like a part of your brand rather than a browser default.
all caps label
Allows you to keep your HTML case-natural (better for screen readers) while making the visual style uppercase or capitalized.
Small Capitals
Uses the font's internal "small caps" variant. It's more sophisticated than just shrinking uppercase letters.
/* Styled underline (wavy, color, offset) */
.styled-underline {
text-decoration: underline wavy #6366f1;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
/* Transform case in CSS (keep HTML natural for a11y) */
.all-caps { text-transform: uppercase; letter-spacing: 0.05em; }
.capitalize { text-transform: capitalize; }
/* Small caps from font */
.small-caps { font-variant-caps: small-caps; }7. Advanced Text Effects
For when you need text that pops. From subtle shadows that add depth to hollowed-out stroke text, these properties should be used for headings and branding elements only.
Lifted Text
Similar to box-shadow, this adds vertical and horizontal offset plus blur. Great for making white text legible over photos.
STROKE
Uses -webkit-text-stroke to draw an outline around each letter. Pair with color: transparent for a hollow look.
/* Hollowed out outline text */
.outline-text {
color: transparent;
-webkit-text-stroke: 1px #6366f1;
}
/* Depth shadow */
.shadow-text {
text-shadow: 2px 2px 4px rgba(0,0,0,0.15);
}