A Brief History of Web Fonts
In the early days of the internet, font options for websites were extremely limited. The first web browsers like Mosaic and Netscape Navigator only supported a handful of built-in "system fonts" that were already installed on users‘ computers. As CSS emerged in the mid-1990s, it became possible to style web pages more extensively. But font choices remained constrained to those available on visitors‘ machines.
The first major development enabling more font choice came with the 1998 launch of Internet Explorer 4, which supported a proprietary font embedding format called Embedded OpenType (EOT). But uptake was slow due to limited browser support. It wasn‘t until services like Google Fonts, Adobe Fonts, and Font Squirrel emerged in the late 2000s and early 2010s that it became easy for web developers to tap into much larger font libraries for their sites and web apps.
Nowadays with widespread format support and abundant font catalogues readily available, just about any font can be used on websites. The days of web-safe system fonts being the only option are far behind us. Yet understanding these categories remains important for any web designer or developer just getting started.
1. Serif Fonts
Serif fonts have decorative flourishes called "serifs" at the ends of strokes within each letter. The addition of serifs makes these fonts appear more formal and elegant, which is why they have traditionally been used for print materials like books and newspapers.
Familiar serif font examples include Times New Roman, Georgia, Garamond, Baskerville, and Caslon.
Research suggests serif fonts are easier to read over long stretches of text. The added visual cues help guide the eye from one word to the next with less strain. For this reason, serif fonts are recommended for blogs, articles, books, magazines, academic papers, or anything with a sizable word count.
The most ubiquitous web-safe serif font is Georgia, which was specially commissioned for release alongside Internet Explorer 5 in 1999. Other common web-safe serif options are Times New Roman and the Microsoft core font Times.
2. Sans-Serif Fonts
Sans-serif fonts have no decorative serifs and create a much cleaner, minimalist look. The simplicity of these fonts makes them ideal for short blurbs of text and digital screens.
Some of the most popular and commonly used sans-serif fonts are Arial, Helvetica, Verdana, Tahoma, Open Sans, Lato, and Source Sans.
Leading tech companies often employ sans-serif fonts for their logos and branding due to the sleek aesthetics. For example, Google uses Product Sans, Mozilla uses Open Sans, while Apple prefers Myriad and Helvetica.
When used online, sans-serif fonts have been shown to aid readability, especially for readers with visual impairments. They are ubiquitous across the web and should make up the bulk of fonts on most websites.
Standard web-safe sans-serif options include Arial, Helvetica, Tahoma, Trebuchet MS, and Verdana. Verdana and Trebuchet were custom-designed by Matthew Carter for Microsoft to excel for on-screen text display in the mid-late 1990s.
3. Monospace Fonts
Monospace fonts differentiate themselves by having a uniform character width. That is to say, every letter occupies exactly the same horizontal space. For this reason, monospaced fonts are also described as fixed-pitch or fixed-width.
This uniform spacing hearkens back to the mechanical limitations of typewriters and teletypes. But it also has modern use cases in coding and terminal/command line interfaces to neatly align text for improved readability.
Some examples of monospaced fonts include Courier, Courier New, Lucida Console, Monaco, Andale Mono, Consolas, Anonymous Pro, Fira Mono, and Droid Sans Mono.
By far the most ubiquitous constant-width font is Courier New. It was created in 1955 by Howard Kettler and later redrawn by Adrian Frutiger for IBM electric typewriters. Courier New is widely used for coding applications due to its crisp, easy-to-read letterforms.
Microsoft commissioned Consolas and Lucida Console as their preferred monospace fonts during development of Windows Vista. Consolas has since grown popular for coding use.
4. Cursive Fonts
Cursive fonts emulate stylized or informal handwriting. With their fluid connecting ligatures and strokes, they impart a sense of motion and life absent from stiff formal scripts.
Cursive fonts lend an inviting, friendly vibe and can communicate that human touch – literally bringing one‘s writing to the screen. But their artistic style typically means lower legibility and readability. As such, these fonts tend to get used sparingly as display or novelty typefaces rather than for lengthy text setting.
Some cursive font examples include Brush Script MT, Lucida Handwriting, Comic Sans, Pacifico, Cookie, Lobster, Roboto Slab, and Dancing Script.
One especially ubiquitous example is Comic Sans, originally drawn by Vincent Connare for Microsoft and bundled with Windows 95. It was conceived specifically for use in Microsoft Bob before becoming a popular font choice to appear more fun, relaxed, and engaging.
Of course, Comic Sans has also faced plenty of backlash among the design community, with many considering it amateurish and tacky. It makes for an interesting case study in perceptions and application of different fonts.
5. Fantasy Fonts
Fantasy fonts comprise decorative display faces that add an element of drama, flair, or intricate detail. This catch-all grouping takes in any fonts that creatively divert from conventional typefaces.
In some cases, a mood or theme ties together font families with artsy ornamental styles. But fantasy fonts need not adhere to a systemized design scheme. These fonts simply embrace imagination over conformity.
Some examples include Papyrus, Arnold Böcklin, Critter, Mistral, Rage Italic, and many more.
Papyrus saw widespread visibility in Avatar (the James Cameron film) and its usage in the movie logo. Adobe even included Papyrus mockingly with Creative Cloud to nod at its meme status among designers.
Use cases for fantasy fonts can include logos, invitations, posters, headers, or any situation where legibility plays second fiddle to dramatic effect. Just don‘t expect readers to get far setting lengthy excerpts with them!
How To Use Fonts in CSS
Now that we‘ve outlined common font categories and examples, let‘s examine how to actually implement them in code. Although we refer to "HTML fonts", adding custom fonts requires CSS styling hooks to function.
The CSS property primarily used to set fonts is conveniently called font-family.
h1 {
font-family: "Times New Roman";
}This would style all <h1> header elements to render using Times New Roman.
We wrap the font name in quotes since the name contains spaces. You can also stack multiple fonts for fallback purposes if the visitor‘s browser lacks your first choice.
p {
font-family: Helvetica, Arial, sans-serif;
} Here paragraph text would first attempt Helvetica, then Arial, before falling back to the generic sans-serif browser default as a last resort.
Beyond font-family, useful CSS properties for fonts include:
font-size– Sets font size (px, em, rem)font-weight– Sets font thickness (bold, normal, lighter, bolder)font-style– Choose normal, italic, oblique
Additionally, text-decoration, text-align, line-height and others help further tailor display.
Let‘s run through how to import and use a font from Google Fonts, a free library with over 1000 options.
We‘ll grab the PT Serif font. First, reference the font CSS stylesheet hosted by Google:
<head>
<link href="https://fonts.googleapis.com/css2?family=PT+Serif" rel="stylesheet">
</head>Then set font-family accordingly:
body {
font-family: ‘PT Serif‘, serif;
}The syntax automatically adds appropriate fallbacks. Now paragraphs gain PT Serif styling!
Best Practices
When working with web fonts, adhere to these guidelines:
Focus on Readability
Stylish fonts shouldn‘t undermine reading ease. Remember serif for lengthy passages and sans-serif for short descriptive bursts. Prioritize legibility through size, spacing, contrast, weight, etc as well.
Specify Fallbacks
Fallback fonts prevent ugly system defaults or missing characters if visitors lack a font. Stack 2-3 options just in case.
Limit Font Count
Performance starts slowing beyond just a few unique fonts. Two or three thoughtfully chosen ones make plenty of visual impact while preventing clutter.
Examine Cross-Browser Rendering
Some fonts render inconsistently across different browsers or OS platforms. Always test with multiple environments.
