Comprehensive settings of font attributes

Comprehensive Font Property Settings

Font properties in CSS control the visual presentation of text, including font family, size, weight, style, and more. Properly setting font properties not only enhances the aesthetics of a webpage but also improves readability and user experience.

Font Family Settings

The font-family property defines the font family used for text. Multiple fonts can be specified as fallback options to ensure proper display across different operating systems and devices.

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

In this example, the browser will first attempt to use the Helvetica Neue font. If unavailable, it will fall back to Arial and finally to the system's default sans-serif font. Font names containing spaces or special characters must be enclosed in quotes.

Font Size Control

The font-size property sets the text size, with units including px, em, rem, and %. Modern web design recommends using relative units to adapt to different devices.

h1 {
  font-size: 2rem; /* Relative to the root element */
}

p {
  font-size: 16px; /* Fixed pixel value */
}

small {
  font-size: 0.875em; /* Relative to the parent element */
}

In responsive design, font sizes can be adjusted with media queries:

@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

Font Weight and Style

font-weight controls the weight, and font-style controls italic effects:

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

.italic-text {
  font-style: italic;
}

.oblique-text {
  font-style: oblique 14deg; /* Can specify the angle of slant */
}

Numeric values from 100 to 900 correspond to different weights, but the actual effect depends on whether the font provides these variants.

Line Height and Letter Spacing

line-height affects the spacing between lines of text. It is recommended to use unitless values based on the current font size:

article {
  line-height: 1.6; /* 1.6 times the font size */
}

.condensed {
  letter-spacing: -0.5px; /* Tightened letter spacing */
}

.spacious {
  letter-spacing: 2px; /* Loosened letter spacing */
}

Font Variants and Features

The font-variant property supports special effects like small caps:

.small-caps {
  font-variant: small-caps;
}

.numeric {
  font-variant-numeric: oldstyle-nums; /* Old-style numerals */
}

OpenType features can be enabled via font-feature-settings:

.ligatures {
  font-feature-settings: "liga", "dlig";
}

Font Shorthand Property

The font shorthand property can set multiple font-related properties at once:

.heading {
  font: italic 500 1.2em/1.5 "Fira Sans", sans-serif;
}

The order is: font-style font-variant font-weight font-size/line-height font-family

Variable Font Applications

Variable fonts allow multiple weights and widths to be achieved with a single file:

@font-face {
  font-family: "Variable Font";
  src: url("font.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 75% 125%;
}

.dynamic-font {
  font-family: "Variable Font";
  font-weight: 350;
  font-stretch: 110%;
}

Font Loading Optimization

Use font-display to control rendering behavior during font loading:

@font-face {
  font-family: "Custom Font";
  src: url("font.woff2") format("woff2");
  font-display: swap; /* Text is initially displayed with a fallback font */
}

Preloading critical fonts can improve performance:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Fonts and Vertical Rhythm

When establishing consistent vertical rhythm, consider the relationship between font size and line height:

:root {
  --baseline: 24px;
}

p {
  font-size: 16px;
  line-height: calc(var(--baseline) * 1);
  margin-bottom: var(--baseline);
}

h2 {
  font-size: 24px;
  line-height: calc(var(--baseline) * 2);
  margin-bottom: var(--baseline);
}

Multilingual Font Support

Specify dedicated fonts for different languages:

:lang(zh) {
  font-family: "Noto Sans SC", sans-serif;
}

:lang(ja) {
  font-family: "Noto Sans JP", sans-serif;
}

:lang(ar) {
  font-family: "Noto Sans Arabic", sans-serif;
  font-size: 1.1em; /* Arabic fonts often require larger sizes */
}

Font Rendering Optimization

Improve font rendering across different platforms:

.text {
  -webkit-font-smoothing: antialiased; /* macOS */
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

Responsive Typography

Use CSS locks for smooth font size scaling:

h1 {
  font-size: calc(1rem + 3vw);
  font-size: clamp(2rem, 4vw, 3rem);
}

Combining viewport units with min/max values ensures font sizes scale within reasonable limits.

Font Color and Contrast

Ensure text colors meet WCAG contrast requirements:

.text {
  color: #333;
  background-color: #fff;
  /* Minimum contrast ratio of 4.5:1 */
}

Use tools to verify if color combinations meet accessibility standards.

Font Shadows and Effects

Add decorative effects while maintaining readability:

.outline-text {
  color: white;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.gradient-text {
  background: linear-gradient(45deg, #ff8a00, #e52e71);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Font Performance Considerations

Optimize font file size and loading strategies:

@font-face {
  font-family: "Optimized Font";
  src: url("font-subset.woff2") format("woff2");
  unicode-range: U+000-5FF; /* Load only the required character range */
}

Consider using system font stacks to reduce reliance on external fonts:

.system-ui {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}