https://www.fonts.com/type-trends-2023

Skip to main content

  • Facebook
  • Twitter
  • Email
  • Home
  • Learn About Fonts & Typography
  • Fonts on the Web: Web-safe Fonts
All

Fontology

 
All articles:
Using Type Tools:
  • Tab Leaders
  • Style-linked fonts
  • Spacing and Kerning, Part 2
  • Spacing and Kerning, Part 1
  • Small Caps in InDesign CS3 and QuarkXPress 7
  • Scaling Logos
  • Optical Margin Alignment in InDesign
  • OpenType Pro
  • OpenType Numerals
  • Making Fractions in OpenType
  • OpenType Features
  • Nonbreaking Hyphens
  • Missing Font Mysteries- Solved At Last!
  • From metal to digital: Bridging the gap, Optimizing digital font readability (Part 2)
  • From metal to digital: Understanding the underlying differences (Part 1)
  • Kerning in QuarkXPress and InDesign
  • InDesign Shortcuts: Special Characters
  • Importing Text
  • Hanging Characters in QuarkXPress® 8
  • Go Wild With OpenType
  • Glyph Palettes
  • Fonts on the Web: Web-safe Fonts
  • Smooth Your Fonts
  • FontExplorer X Pro and Server
  • ESQ Fonts - The Best Solution for the Screen
  • ESQ Fonts
  • A Brief History of Digital Type
  • Converting Text to Outline
  • Change those defaults!
  • Baseline Shift
  • Automatic Page Numbering
  • Auto Leading
  • + More...
Font Info:
Situational Typography:
Typographic Reference:
Glyphs & Characters:
Fine Typography:
Fontology

Fonts on the Web: Web-safe Fonts

Previous Article
Next Article

by Ilene Strizver

Awebsafefonts
The differences between these five Web-safe fonts are apparent.

Why can’t you use whatever fonts you want on a Web site…or can you? Which fonts can you use easily, safely, and reliably? The “wonders of the Web” still involve techno-quirks and design challenges. One of the primary ones — for designers, that is — has historically been the limited font choices on the Web.

In print, “what you see” really is “what you get.” On the Web, however, this is not exactly the case. For all viewers to see what the designer sees, either the viewers all need to have all of the fonts (known as Web-safe fonts), installed on their computers, or the fonts (known as Web fonts) all need to be accessed from a remote server — using a revolutionary, new technology explained in more detail here. If the fonts used in a Web page are not accessible to all viewers by either scenario mentioned above, the fonts will default to something else in their respective systems, which can have unexpected and often undesirable results. For this reason, most Web designers currently stick to the Web-safe fonts which are common to most Mac® and PC browsers.

Web-safe fonts

Web-safe fonts include serif, sans, and symbol typefaces. While some of them were originally designed for print, others have been designed specifically for legibility on the screen.

Sans Serif

The Verdana® typeface is widely considered the most legible of Web-safe typefaces. Its designer paid particular attention to ensuring that text remains readable on screen even at small sizes (on screen). Verdana offers a tall x-height, comfortable width, and open letter spacing.

The Trebuchet® MS typeface also retains clarity and readability at small sizes on the Web. It’s slightly narrower than Verdana, allowing more copy to fit in the same space. Its curved stroke endings and unusual lowercase "g" give it a bit more distinctiveness than Verdana.

The Arial® typeface was not (specifically) designed specifically for the Web. However, this very readable sans works well on the Web. Arial is similar to Helvetica in both width and spacing, but with slight character modification. (See Arial vs. Helvetica)

Serif

The Georgia® typeface was designed for the Web as an alternative to the Times New Roman® font. Georgia has open letterforms and spacing, making it crisp, clean, and easy to read on the Web, even at smaller sizes.

The Times New Roman® was designed for print, and for this reason is not the easiest to read on the Web, especially at smaller sizes. If you like the look of Times New Roman but need something sturdier, try Georgia instead.

All of the above fonts are available in Regular and Bold with italics.

Symbol fonts

Webdings, Wingdings, and the ITC Zapf Dingbats® typefaces are included with most operating systems. They contain many useful graphics, from stars, arrows, and snowflakes to thought bubbles, geometric shapes and interrobangs. Note that these font names may show up as symbols when a font menu is displayed as WYSIWYG.

Type As Graphic

There is a way around these creative limitations. You can enjoy complete freedom in your typeface choice when choosing a typeface for a heading, logo, nav bar, or any other type usage by converting it into a graphic. Your file can be in the form of a .gif, .jpg or .png. This gives you the flexibility to combine text with images, textures, and patterns and to take advantage of other creative approaches for a Web site.

But before you go nuts creating lots of graphics, keep these three things in mind:

  • they are slower-loading than straight text
  • they are not easily editable
  • they are not searchable by search engines
  •  

For this reason, most Web sites combine straight text with graphics in order to achieve a balance of readability, creativity, and ease of navigation.

Ilene Strizver
  • Editor’s Note:Ilene Strizver, founder of The Type Studio, is a typographic consultant, designer and writer specializing in all aspects of typographic communication. She conducts Gourmet Typography workshops internationally. Read more about typography in her latest literary effort, Type Rules! The designer's guide to professional typography, 4th edition, published by Wiley & Sons, Inc. This article was commissioned and approved by Monotype Imaging Inc.
Previous Article
Next Article