Font Properties (font-family, font-size, font-weight)

In web design and development, the presentation of text directly determines a user's first impression. While HTML5 provides rich semantic tags to describe content structure, it is the fine-tuning of typography via CSS that truly brings a page to life. Mastering font-family, font-size, font-weight, and related typographic properties is an essential foundational skill for every frontend developer. This article delves into the mechanisms and application techniques of these core properties to help you elevate text layout from "readable" to "beautiful."
The font-family property specifies the name or family of fonts used in the webpage. It is one of the most basic text style controls in CSS; not only does it affect the rendering shape of characters, but it also carries functions regarding brand tone and emotional expression. The core logic of this property lies in its priority order: the browser attempts to load fonts sequentially according to the order provided in the list; once a matching local system font is found, the search stops, and that font is applied; if none of the options in the list can be retrieved on the user's device, it falls back to the browser's default sans-serif or serif font family.

In practical application, we typically adopt a "preferred + fallback" strategy to ensure cross-platform compatibility. For example, to present a modern, concise interface style, we can prioritize specifying the "Inter" font from Google Fonts while providing the system default sans-serif as a backup option:

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

This code first attempts to use Segoe UI on the Windows system (a competitor similar to Microsoft YaHei); if that fails, it sequentially attempts the default sans-serif fonts of major operating systems such as Linux/Android/Tizen. It is worth noting that with new features introduced in CSS3, we can also fine-tune font glyph characteristics through font-feature-settings and font-variant, such as adjusting ligatures or enabling oldstyle figures, thereby achieving more delicate layout effects without changing the entire font family.

font-size: Controlling Visual Hierarchy and Readability

Font size is a key property that determines the amount of space text occupies on the page; it directly impacts reading comfort and the visual hierarchy of content. The value of font-size can be a specific pixel value, relative units (such as em, rem), percentages, or viewport-relative units (such as vw). In modern responsive design, it is recommended to use rem relative to the root element as a baseline for scaling, as it is unaffected by the user's browser default font size settings, thereby ensuring design consistency.

To build a clear visual hierarchy, it is advisable to adopt a stepped font size planning: titles are typically 1.25 to 1.4 times larger than body text (i.e., common 16px/20px, 28px/32px), while subtitles fall in between. Additionally, for mobile devices, considering differences in screen density, it is sometimes necessary to combine rem and media queries to dynamically adjust font size:

h1 { font-size: clamp(1.5rem, 4vw + 0.75rem, 3rem); } /* Responsive large title */
p   { font-size: 16px; line-height: 1.6; }              /* Standard body text */

Using the clamp() function can elegantly achieve a smooth transition between minimum, maximum, and ideal values, ensuring that text remains clear and readable across different resolutions without appearing too large or too small. Moreover, matching font size with line height (line-height) is equally important; a font that is too small will cause reading difficulties, while appropriate line spacing can effectively improve the readability of long texts.

font-weight: Strengthening the Communication of Key Information

The font weight property font-weight controls the thickness of character strokes, with values ranging from thin to bold as 100, 200...900 (where the normal value is 400). Besides the basic bold effect, this property is also commonly used to distinguish the importance level of text. In layout design, body text is usually set to a regular weight (normal), while titles or emphasized content use a heavier weight to attract attention.

It is worth noting that not all fonts support complete weight hierarchies. Certain special glyphs may render normally only under specific weight values and degrade to default styles or even display garbled characters under other values. Therefore, when designing complex multi-level text structures, it is crucial to verify whether the target font possesses the required weight variants. If compatibility issues are encountered, risks can be mitigated by combining multiple font-weight rules or adjusting design strategies:

h2 { font-weight: bold; }           /* Equivalent to 700 */
em { font-style: italic; font-weight: normal; } 
strong { font-weight: bolder; }    /* Dynamic bolding, based on the heaviest value of the current font */

Using bolder or lighter keywords allows the browser to intelligently adjust based on the actual capabilities of the current font, which is particularly useful when handling mixed text in multi-language environments.

Comprehensive Application: Creating Elegant Layouts

In practical projects, a single property often fails to meet complex layout requirements; typically, multiple font properties must be combined to create a unified visual style. An excellent layout scheme not only requires clear and easy-to-read text but also considers the balance between loading performance and accessibility. For example, for marketing pages that require fast loading, a system font priority strategy can be adopted to reduce network requests; whereas for corporate official websites focusing on brand personality, third-party fonts should be carefully selected and optimized in their introduction method.

Additionally, do not forget to pay attention to accessibility design (A11y). Some users may adjust the browser's default font size due to visual impairments or preference settings; therefore, maintaining reasonable contrast ratios and flexible scaling mechanisms is crucial. By reasonably pairing font-family, font-size, and font-weight, we can not only enhance the aesthetic quality of the page but also ensure that content better serves every visitor.