CSS Text Styling: Making Text More Expressive and Readable

Text is the core carrier of web content. Whether it is a news website, a blog, or an e-commerce platform, the main purpose of user visits is to read and obtain information. Good text styling not only makes the content more beautiful, but more importantly, improves readability, allowing users to obtain information easily and comfortably.

Imagine two scenarios:

• Scenario A: A blog post with too small font, too narrow line spacing, and paragraphs crowded together.
• Scenario B: The same article, with moderate font size, comfortable line spacing, and distinct paragraph hierarchy.

Obviously, the reading experience of Scenario B is much better. CSS provides a wealth of text styling properties that allow us to precisely control the presentation of text.

Font Properties

1. Font Family (font-family)

font-family defines the font used by the element. Since available fonts vary across operating systems and devices, a list of fonts is usually specified as a fallback.

/* Basic usage */
body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Common font stack for Chinese websites */
body {
  font-family: -apple-system,
    /* macOS and iOS system fonts */ BlinkMacSystemFont, /* macOS Chrome */
      "Segoe UI", /* Windows */ "PingFang SC", /* macOS Chinese */
      "Microsoft YaHei", /* Windows Chinese */ sans-serif; /* Generic sans-serif font */
}

/* Use different fonts for headings */
h1,
h2,
h3 {
  font-family: Georgia, "Times New Roman", serif;
}

/* Code font */
code,
pre {
  font-family: "Courier New", Courier, monospace;
}

Font Types:

1. Serif: Decorative strokes at the ends of strokes, suitable for formal and traditional scenarios.

   .formal-text {
     font-family: Georgia, "Times New Roman", serif;
   }

2. Sans-serif: Modern and concise, suitable for screen reading.

   .modern-text {
     font-family: Arial, Helvetica, sans-serif;
   }

3. Monospace: Each character has the same width, suitable for code display.

   .code-text {
     font-family: "Consolas", "Monaco", monospace;
   }

Using Web Fonts (Google Fonts):

<!-- Import Google Fonts in HTML -->
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap"
  rel="stylesheet"
/>

/* Use in CSS */
body {
  font-family: "Roboto", sans-serif;
}

2. Font Size (font-size)

/* Using pixels (absolute unit) */
.small-text {
  font-size: 12px;
}

.normal-text {
  font-size: 16px;
}

.large-text {
  font-size: 24px;
}

/* Using em (relative to parent element) */
.relative-text {
  font-size: 1.5em; /* 1.5 times the parent element's font */
}

/* Using rem (relative to root element) */
.root-relative {
  font-size: 1.2rem; /* 1.2 times the root element's font */
}

/* Using percentage */
.percentage-size {
  font-size: 120%; /* 120% of the parent element's font */
}

/* Using keywords */
.keyword-size {
  font-size: larger; /* Optional: xx-small, x-small, small, medium, large, x-large, xx-large */
}

Responsive Font Size:

:root {
  font-size: 14px; /* Base font size for mobile devices */
}

@media (min-width: 768px) {
  :root {
    font-size: 16px; /* Tablet and desktop */
  }
}

body {
  font-size: 1rem; /* Inherit root element font size */
}

h1 {
  font-size: 2.5rem; /* Automatically adjust based on screen */
}

h2 {
  font-size: 2rem;
}

p {
  font-size: 1rem;
}

3. Font Weight (font-weight)

/* Using keywords */
.light-text {
  font-weight: lighter;
}

.normal-text {
  font-weight: normal; /* Default value, equivalent to 400 */
}

.bold-text {
  font-weight: bold; /* Equivalent to 700 */
}

.bolder-text {
  font-weight: bolder;
}

/* Using numerical values (100-900) */
.thin-text {
  font-weight: 100; /* Thin */
}

.regular-text {
  font-weight: 400; /* Regular */
}

.medium-text {
  font-weight: 500; /* Medium */
}

.semi-bold-text {
  font-weight: 600; /* Semi-bold */
}

.bold-text {
  font-weight: 700; /* Bold */
}

.extra-bold-text {
  font-weight: 800; /* Extra bold */
}

Practical Application:

/* Navigation links */
.nav-link {
  font-weight: 500;
}

.nav-link.active {
  font-weight: 700; /* Bold for active state */
}

/* Article heading hierarchy */
h1 {
  font-weight: 800;
}

h2 {
  font-weight: 700;
}

h3 {
  font-weight: 600;
}

/* Highlighted text */
.highlight {
  font-weight: 700;
  color: #e74c3c;
}

4. Font Style (font-style)

/* Normal style */
.normal-style {
  font-style: normal;
}

/* Italic */
.italic-text {
  font-style: italic;
}

/* Oblique (slanted if no italic version exists) */
.oblique-text {
  font-style: oblique;
}

Usage Scenarios:

/* Quoted text */
blockquote {
  font-style: italic;
  color: #555;
  border-left: 4px solid #ddd;
  padding-left: 20px;
}

/* Foreign terms */
.foreign-term {
  font-style: italic;
}

/* Emphasized content */
em {
  font-style: italic;
  font-weight: 500;
}

5. Font Shorthand

/* Full syntax: font-style font-weight font-size/line-height font-family */
.shorthand-font {
  font: italic 700 16px/1.5 Arial, sans-serif;
}

/* Minimal form (must include size and family) */
.minimal-font {
  font: 16px Arial;
}

/* With line height */
.with-line-height {
  font: 16px/24px "Helvetica Neue", Arial, sans-serif;
}

Text Properties

1. Text Color (color)

/* Using color keywords */
.text-blue {
  color: blue;
}

/* Using hexadecimal */
.text-custom {
  color: #2c3e50;
}

/* Using RGB */
.text-rgb {
  color: rgb(44, 62, 80);
}

/* Using RGBA (with transparency) */
.text-semi-transparent {
  color: rgba(0, 0, 0, 0.7);
}

/* Using HSL */
.text-hsl {
  color: hsl(210, 29%, 24%);
}

2. Text Alignment (text-align)

/* Left align (default) */
.align-left {
  text-align: left;
}

/* Right align */
.align-right {
  text-align: right;
}

/* Center align */
.align-center {
  text-align: center;
}

/* Justify align */
.align-justify {
  text-align: justify;
}

Practical Application:

/* Center headings */
h1,
h2 {
  text-align: center;
}

/* Justify body paragraphs (neater) */
article p {
  text-align: justify;
  text-justify: inter-word;
}

/* Right align prices */
.price {
  text-align: right;
  font-weight: 700;
}

3. Text Decoration (text-decoration)

/* No decoration (often used to remove link underlines) */
a {
  text-decoration: none;
}

/* Underline */
.underline {
  text-decoration: underline;
}

/* Overline */
.overline {
  text-decoration: overline;
}

/* Line-through */
.line-through {
  text-decoration: line-through;
}

/* Combined usage */
.fancy-decoration {
  text-decoration: underline overline;
}

/* Set decoration line style */
.dotted-underline {
  text-decoration: underline dotted #e74c3c;
}

.wavy-underline {
  text-decoration: underline wavy #3498db;
}

Application Examples:

/* Link styles */
a {
  color: #3498db;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Discount price */
.original-price {
  text-decoration: line-through;
  color: #999;
}

.sale-price {
  color: #e74c3c;
  font-weight: 700;
}

4. Text Transformation (text-transform)

/* Uppercase */
.uppercase {
  text-transform: uppercase;
}

/* Lowercase */
.lowercase {
  text-transform: lowercase;
}

/* Capitalize first letter */
.capitalize {
  text-transform: capitalize;
}

/* No transformation (default) */
.none {
  text-transform: none;
}

Usage Scenarios:

/* Uppercase button text */
.button {
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Capitalize post title */
.post-title {
  text-transform: capitalize;
}

/* Navigation menu */
.nav-item {
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 600;
}

5. Line Height (line-height)

Line height is one of the most important factors for text readability.

/* Using numerical value (recommended, unitless multiplier) */
.normal-line-height {
  line-height: 1.6; /* 1.6 times the font size */
}

/* Using pixels */
.fixed-line-height {
  font-size: 16px;
  line-height: 24px;
}

/* Using percentage */
.percentage-line-height {
  line-height: 160%;
}

/* Using em */
.em-line-height {
  line-height: 1.5em;
}

Best Practices:

/* Body paragraphs - larger line height improves readability */
p {
  font-size: 16px;
  line-height: 1.6; /* Recommended between 1.4-1.8 */
}

/* Headings - smaller line height is more compact */
h1 {
  font-size: 2.5rem;
  line-height: 1.2; /* Headings can be tighter */
}

/* Code blocks - precise line height */
code {
  font-size: 14px;
  line-height: 1.5;
}

6. Letter Spacing (letter-spacing)

/* Increase spacing */
.spaced-letters {
  letter-spacing: 2px;
}

/* Decrease spacing */
.tight-letters {
  letter-spacing: -1px;
}

/* Normal spacing */
.normal-spacing {
  letter-spacing: normal;
}

/* Using em unit */
.em-spacing {
  letter-spacing: 0.1em;
}

Application Scenarios:

/* Buttons and tags */
.button,
.tag {
  text-transform: uppercase;
  letter-spacing: 1px; /* Increased spacing for uppercase letters is easier to read */
}

/* Logo text */
.logo-text {
  letter-spacing: 3px;
  font-weight: 700;
}

/* Navigation menu */
.nav-link {
  letter-spacing: 0.5px;
}

7. Word Spacing (word-spacing)

/* Increase word spacing */
.wide-words {
  word-spacing: 5px;
}

/* Decrease word spacing */
.tight-words {
  word-spacing: -2px;
}

/* Normal spacing */
.normal-word-spacing {
  word-spacing: normal;
}

8. Text Indent (text-indent)

/* First line indent */
.indented-paragraph {
  text-indent: 2em; /* Indent by two characters */
}

/* Negative indent (hanging indent) */
.hanging-indent {
  text-indent: -1em;
  padding-left: 1em;
}

Common Style for Chinese Paragraphs:

.chinese-paragraph {
  text-indent: 2em; /* First line indent */
  line-height: 1.8; /* Larger line height */
  text-align: justify; /* Justify alignment */
  margin-bottom: 1em;
}

9. Text Shadow (text-shadow)

/* Basic shadow: x-offset y-offset blur-radius color */
.simple-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Multiple shadows */
.multiple-shadows {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Glow effect */
.glow-text {
  color: white;
  text-shadow: 0 0 10px rgba(52, 152, 219, 0.8), 0 0 20px rgba(52, 152, 219, 0.6),
    0 0 30px rgba(52, 152, 219, 0.4);
}

/* 3D effect */
.3d-text {
  color: #2c3e50;
  text-shadow: 1px 1px 0 #34495e, 2px 2px 0 #34495e, 3px 3px 0 #34495e, 4px 4px
      0 #34495e;
}

10. Text Overflow Handling

/* Single line text overflow with ellipsis */
.ellipsis-single {
  white-space: nowrap; /* No wrapping */
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* Show ellipsis */
}

/* Multi-line text overflow */
.ellipsis-multi {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Show 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Force line break */
.word-break {
  word-break: break-all; /* Break at any character */
}

.word-wrap {
  word-wrap: break-word; /* Break at word boundaries */
}

Practical Application Cases

1. Blog Post Typography

.blog-post {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", sans-serif;
}

.blog-post h1 {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: #2c3e50;
  margin-bottom: 10px;
}

.blog-post .meta {
  font-size: 0.9rem;
  color: #7f8c8d;
  margin-bottom: 30px;
}

.blog-post p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #34495e;
  margin-bottom: 1.5em;
  text-align: justify;
}

.blog-post h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #2c3e50;
  margin-top: 2em;
  margin-bottom: 0.8em;
}

2. Card Title Style

.card-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 10px;

  /* Limit to two lines, show ellipsis if exceeded */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

3. Price Tag

.price-tag {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.price-current {
  font-size: 2rem;
  font-weight: 700;
  color: #e74c3c;
}

.price-original {
  font-size: 1.2rem;
  color: #95a5a6;
  text-decoration: line-through;
}

.price-currency {
  font-size: 1.2rem;
  font-weight: 400;
}

Text Styling Best Practices

1. Ensure Readability

/* Recommended: Good text readability */
.readable-text {
  font-size: 16px; /* Not too small */
  line-height: 1.6; /* Appropriate line height */
  color: #2c3e50; /* Sufficient contrast */
  max-width: 70ch; /* Limit line length (approx. 70 characters) */
}

2. Responsive Typography

/* Use rem units for responsiveness */
html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  font-size: 1rem;
}

h1 {
  font-size: 2.5rem;
}

3. Font Loading Optimization

/* Use font-display to control font loading */
@font-face {
  font-family: "CustomFont";
  src: url("/fonts/custom-font.woff2") format("woff2");
  font-display: swap; /* Show fallback font immediately, swap when font loads */
}

Summary

Text styling is the foundation of web design and directly affects the user's reading experience.

Key Points:

• Font Properties: Reasonably choose font family, size, weight, and style.
• Text Properties: Master text control techniques such as alignment, decoration, and transformation.
• Spacing Control: Line height, letter spacing, and word spacing affect readability.
• Readability First: Ensure moderate font size, sufficient contrast, and reasonable line length.
• Responsive Design: Adjust font size according to the device.