Fonts for Different Scripts

Fonts are foundational to the presentation layer. They directly impact the readability, accessibility, and aesthetic appeal of the UI.

The goal of designing a font-management strategy is to consider availability, loading strategies, styling, and script-specific quirks and ensure that text in different writing systems is rendered optimally, without sacrificing usability or performance.

Font Availability

No single font can be guaranteed to render all characters in all scripts, although a few, such as the Noto family, offer impressive support for different scripts and writing systems.

Ensuring that fonts are available across platforms and devices is critical for delivering a consistent and accessible user experience. This involves selecting appropriate fonts, defining fallback options, and addressing issues like missing glyphs or rendering inconsistencies.

Web-Safe Fonts

Web-safe fonts are sets of typefaces commonly pre-installed on most operating systems and devices. They became important in the early days of web development, when developers could not rely on users having access to custom or less common fonts. Web-safe fonts ensured consistent text rendering across different platforms, browsers, and devices. Examples of web-safe fonts include Arial, Times New Roman, and Verdana, which support Latin scripts but often lack support for more complex or less common writing systems, like Devanagari or Arabic.

In modern web development, the rise of web fonts and advancements in CSS have diminished the importance of web-safe. However, they still play an important role as fallback options, ensuring that content remains readable even when custom fonts fail to load.

Custom Web Fonts

Custom web fonts have transformed the way text is displayed on websites. They free developers (and designers!) from the limited, platform-dependent, and often dull choices of web-safe fonts. They offer an extra level of visual polish and help reinforce your style and branding.

Custom fonts are not installed on the user's device by default, but instead are delivered via the web in the same way that external CSS and JavaScript files are loaded.

Custom web fonts are available in formats like:

WOFF and WOFF2: Highly compressed, modern formats optimized for the web.
TrueType (TTF) and OpenType (OTF): Versatile formats supporting advanced typography features like ligatures.
Embedded OpenType (EOT): Legacy format primarily used for older versions of Internet Explorer.

Font hosting services provide access to an enormous variety of fonts, and you don't have to host them on your own webserver. Sources include:

Google Fonts: A free and widely used resource offering a vast library of fonts with global script support.
Adobe Fonts: A premium service providing professional-grade fonts, including script-specific options.

On the other hand, hosting fonts on your own servers offers greater control and independence from third-party providers.

Font Styles and Weights

While you should use fonts with styles and weight ranges that meet your design requirements, the more font families you load, the heavier your page It's necessary to balance precise aesthetic control against performance.

The CSS font-weight and font-style properties define how text is displayed:

font-weight: 400; /* Normal */
font-weight: 700; /* Bold */
font-style: italic;

Variable Fonts vs. Multiple Font Files

Traditionally, web designers and developers used separate font files for each weight, style, or variation of a typeface. For example, a font family might include different files for light, regular, bold, italic, and other weights or styles. While this approach provided flexibility in typography, it increased the number of HTTP requests and overall page load time, impacting performance.

Variable fonts revolutionize this approach by consolidating all font variations into a single file. A variable font uses interpolation to define a range of weights, widths, slants, and other properties within a single font file. Instead of loading separate files for each variation, developers can dynamically adjust these properties using CSS, significantly reducing file size and improving performance.

Advantages of Variable Fonts

Reduced HTTP Requests and Bandwidth:
- A single variable font file replaces multiple files, lowering the number of HTTP requests and reducing overall bandwidth usage.
Greater Design Flexibility:
- Variable fonts support fine-grained control over font properties like weight (font-weight), width (font-stretch), and optical size (font-optical-sizing).
- Designers can specify intermediate weights or widths that aren’t available in predefined font files.
Improved Performance:
- Fewer font files lead to faster load times, especially on low-bandwidth connections.
- Better caching efficiency because a single file serves all variations.

Example: Using a Variable Font in CSS

A traditional font family with three weights (regular, bold, and extra bold) might require separate files:

@font-face {
  font-family: 'MyFont';
  src: url('MyFont-Regular.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'MyFont';
  src: url('MyFont-Bold.woff2') format('woff2');
  font-weight: 700;
}

@font-face {
  font-family: 'MyFont';
  src: url('MyFont-ExtraBold.woff2') format('woff2');
  font-weight: 800;
}

With a variable font, a single file handles all variations:

@font-face {
  font-family: 'MyFont';
  src: url('MyFontVariable.woff2') format('woff2-variations');
  font-weight: 100 900; /* Supports all weights from 100 to 900 */
}

You can then adjust weights dynamically:

p {
  font-family: 'MyFont';
  font-weight: 550; /* A custom weight between Regular (400) and Bold (700) */
}

Considerations

Browser Support: Variable fonts are supported by all major modern browsers but may not work on older platforms.
File Size: While variable fonts consolidate multiple styles, they can be larger than individual font files, so evaluate the trade-offs based on project needs.
Typography Precision: Not all typefaces are available as variable fonts, so choose carefully based on design requirements.

In summary, variable fonts simplify font management, enhance design flexibility, and improve web performance, making them a powerful tool for modern typography.

Know Your Fonts' Capabilities

Not all fonts support all weights or styles. For instance, Noto Sans includes multiple weights suitable for various contexts, but many fonts only provide weights of "normal" and "bold." Specifying weights or styles that a font does not support can leading to fallback issues or unpredictable rendering, so test to verify that your preferred fonts render as intended on devices with different display technologies (e.g., Retina displays vs. standard LCDs).

Font Smoothing

Font smoothing refers to techniques used by operating systems and browsers to improve the appearance of text on screen. It reduces the jagged edges of characters by anti-aliasing or subpixel rendering, techniques that blend text with the background at the edges of glyphs, creating a smoother and more visually appealing appearance.

While ultimate control of font smoothing lies with the operating system, developers can often influence it using CSS. Key properties include:

-webkit-font-smoothing: antialiased; /* For webkit-based browsers */
-moz-osx-font-smoothing: grayscale; /* For macOS */

Always test text rendering in multiple environments. Over-aggressive smoothing may make text appear blurry, while insufficient smoothing can leave text looking jagged. Smoothing effects vary between operating systems, browsers, and devices, and some fonts are optimized for particular smoothing techniques.

Script-Specific Considerations

Different writing systems have different conventions. For example, bold and italic styles are less common in East Asian scripts compared to Latin scripts. Research and follow the typographic conventions of the writing system for each locale and language you support. Excessive use of bold or italic can make text harder to read, especially in scripts where these styles are not traditionally used.