Font properties decide what the characters themselves look like, while text properties decide how characters are laid out within lines and paragraphs. Line-height, alignment, and letter-spacing combine to determine whether a passage of text "feels comfortable" to read.
line-height
line-height is one of the most underestimated properties in typography — body text is usually set between 1.5 and 1.8. Too small a line-height makes multi-line text feel cramped; too large breaks the continuity of reading.
p { line-height: 1.6; } /* unitless number, relative to its own font-size; the recommended way */
line-height comparison
line-height: 1.1 — multi-line text is squeezed together, lines are easy to mix up, and it feels oppressive.
line-height: 1.7 — generous spacing between lines makes multi-line text easier and calmer to read.
TipUnitless values (e.g. 1.6) are better than values with units (e.g. 24px) — the former is a ratio that child elements recalculate against their own font-size when inheriting; the latter is a fixed value, so the line-height does not follow when a child's font-size changes, which easily breaks line-height in nested structures.
text-align and text-indent
Property
Common values
Description
text-align
left / center / right / justify
justify aligns both edges; rarely used in Chinese layout because it can produce uneven letter spacing
text-indent
e.g. 2em
first-line indent; Chinese layout commonly uses 2em to mimic a two-character indent
Widened letter spacing is common in small caps (such as labels and navigation) and improves legibility; it is generally not recommended in body text, since the browser's default spacing has been carefully tuned by type designers.
text-decoration
The modern approach splits the underline into three independently controllable sub-properties, letting you fine-tune the underline's style and color without relying on the weight of the font's built-in underline.
a {
text-decoration-line: underline;
text-decoration-color: var(--accent2);
text-decoration-thickness: 2px;
text-underline-offset: 3px; /* distance between the underline and the text baseline */
}
text-transform
Value
Effect
uppercase
Converts everything to uppercase
lowercase
Converts everything to lowercase
capitalize
Capitalizes the first letter of each word
Tiptext-transform only affects the displayed rendering and does not change the original text in the HTML; copying and pasting still yields the original text, which is an advantage over converting case in the data layer.
Handling Text Overflow
Truncating a single line of text that overflows its container and showing an ellipsis is a common need for lists and card titles:
Multi-line truncation relies on WebKit's private line-clamping property (now supported by all major browsers):
.desc {
display: -webkit-box;
-webkit-line-clamp: 2; /* show at most 2 lines, truncating the rest */-webkit-box-orient: vertical;
overflow: hidden;
}
Common Pitfalls
For single-line ellipsis you write only text-overflow: ellipsis but forget to also set overflow: hidden and white-space: nowrap — all three are required.
Using a fixed pixel value for line-height, so that when a component's font-size changes (e.g. responsive scaling) the line-height ratio goes out of proportion.
Using text-align: justify for Chinese body text: browser implementation differences can produce unevenly spaced characters; Chinese typography usually stays left-aligned.