dev.rean.me
css

CSS Fonts & Text Styling Explained: Short & Clear Guide with Examples, Tips & Related Posts

Master CSS font and text formatting fast with short, clear visual examples covering font-family, font-weight, line-height, text-align, web fonts, text-shadow, typography tips, and related posts opening in a new tab.

2026-10-02 · 6 min read

#css#fonts#typography#text-style#frontend#web-development
Share:

Typography is the backbone of web design. Over 90% of information on the web is written text. Mastering CSS font and text properties allows you to create readable, accessible, and visually stunning user interfaces.

Here is a short, clear, and visual guide to CSS fonts and text styling. 🚀

💡 Core Concept: Font Properties vs. Text Properties

In CSS, typography rules fall into two distinct groups:

  1. Font Properties: Define the typeface itself (family, size, weight, style).
  2. Text Properties: Control how the text is aligned, spaced, transformed, and decorated inside its container.

⚡ Quick Cheatsheet

CategoryPropertyCommon ValuesWhat It Controls
Fontfont-familyInter, sans-serif | system-uiTypeface family choice
font-size16px | 1rem | clamp(1rem, 2.5vw, 2rem)Text size
font-weight400 (normal) | 600 (semibold) | 700 (bold)Text thickness
font-stylenormal | italicNormal vs slanted italic text
Textcolor#1e293b | rgb(59 130 246)Text color
text-alignleft | center | right | justifyHorizontal text alignment
line-height1.5 | 1.6 | 1.2Spacing between text lines
letter-spacing0.5px | -0.02emHorizontal letter spacing
text-transformuppercase | lowercase | capitalizeText capitalization
text-decorationnone | underline | line-throughText underline / strike-through
text-shadow2px 2px 4px rgba(0,0,0,0.3)Text drop shadow

📦 Essential Code Examples

1. Modern System Font Stack

Using system font stacks gives your application native OS speeds with zero layout shift (CLS) and zero web font downloads.

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: 1rem;      /* 16px base size */
  line-height: 1.6;     /* Optimal line spacing for body text */
  color: #0f172a;       /* Dark slate text */
}

2. Importing & Using Google Web Fonts

Import custom Google Fonts (like Inter or Roboto) directly in CSS or HTML <head>.

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

.heading {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 2.25rem;
  letter-spacing: -0.025em; /* Subtle tight tracking for headings */
}

3. Text Alignment & Line Spacing

Controls text layout, line spacing, and letter spacing for optimal readability.

.article-text {
  text-align: left;
  line-height: 1.7;        /* Comfortable reading height */
  letter-spacing: 0.2px;   /* Added breathing room */
}

⚡ Live Result Preview:

Standard Line Height (line-height: 1.1 - Cramped)

Good typography makes reading effortless. When line-height is set too low, multi-line text becomes tight, difficult to read, and strains the user's eyes.

Optimal Line Height (line-height: 1.6 - Readable)

Good typography makes reading effortless. When line-height is set to 1.5 or 1.6, text has comfortable breathing room between lines!

4. Text Truncation with Ellipsis (...)

Truncate long text seamlessly to fit single-line or multi-line cards.

/* Single-line Truncation */
.truncate-single {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Multi-line Truncation (2 Lines) */
.truncate-multi {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

⚡ Live Result Preview:

Single Line Ellipsis:
This is a super long blog post title that will automatically get truncated with an ellipsis

5. Text Transformation, Decoration & Shadow

Styling buttons, badge headers, and glowing text.

.badge {
  text-transform: uppercase; /* UPPERCASE text */
  font-weight: 700;
  letter-spacing: 1px;
}

.glowing-text {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.8), 0 0 20px rgba(59, 130, 246, 0.4);
}

🎯 5 Essential Typography Pro Tips

Tip 1: Always Use Unitless line-height

Never use px or em units for line-height. Use unitless values like 1.5 or 1.6. Unitless values multiply relative to the element's actual font size, preventing child text overlap bugs!

Tip 2: Limit Content Width to 65 Characters (65ch)

For maximum reading comfort on articles and blogs, set max-width: 65ch; on paragraph containers. Lines that are too long cause reader eye fatigue.

.article-body {
  max-width: 65ch; /* ~65 characters per line */
  margin-inline: auto;
}

Tip 3: Enable Smooth Web Font Antialiasing

Add webkit font smoothing for crisp text rendering on macOS, iOS, and modern screens:

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Tip 4: Responsive Fluid Typography with clamp()

Scale font sizes smoothly from mobile to desktop screens without writing media queries!

h1 {
  /* clamp(MIN, VAL, MAX) */
  font-size: clamp(1.75rem, 4vw, 3rem);
}

Tip 5: Use font-display: swap for Web Fonts

When loading custom Google or Adobe web fonts, add font-display: swap; to prevent invisible text while the font is downloading (FOIT).

🌐 Related Posts & Useful Resources

Explore these official typography guides, free font libraries, and related CSS tutorials. All external and internal reference links open in a new tab.

📚 Official Typography Specs & Web Font Libraries (New Tab)

Happy typography designing! If you found this short & clear CSS Fonts & Text Style guide helpful, feel free to share it with fellow developers! 🎨⚡

← Back to css
Share: