SVG Text Layout

Chapter 10. Fonts, Families, Faces

This book has so far covered, in extensive detail, all the ways in which you can control how letters (and other glyphs) are arranged within your SVG. The letters themselves, however, have been somewhat overlooked. This chapter addresses that gap. Letterforms are at least as important as layout in creating the final appearance of graphical text.

A full discussion of typography, fonts, and type selection in web design is a book unto itself. So we’re not going to discuss how you would choose (or design!) a typeface for your graphic. Instead, this chapter focuses on how you can get the browser to use the font you prefer. Chapter 11 will then explain what you can do to minimize the impact if it uses a different font regardless of your style settings.

Generic Styles

The primary way to select a font, and therefore control the character style, is with the font-family style property. It is an inherited style that may be specified as an SVG presentation attribute or CSS style rule. With CSS rules, font-family may be set directly or as part of the font shorthand. However it is set, the value is a comma-separated list of font-family names, ending with a generic fallback font description.

Most of the examples in this book have simply used the generic names to describe what type of font should be used. These keywords are defined in core CSS, and describe some of the most basic distinctions between font types. Browsers are expected to provide fonts for the ...