Font Wars: Web Typography Made Easy With Css3
-
- January 1, 2012
- Kristine Green
Step aside, web-safe fonts; the newest level of Cascading Style Sheets, CSS3, makes personalized typography convenient and accessible to users worldwide.
CSS3, though still under revision, is already in use. While HTML governs the structure of a document, CSS defines the style for structural elements. Comprised of many modules, CSS3 includes Fonts Module Level 3, with vastly refined and improved control of letterform. The @font-face rule found in CSS3 is user-friendly and eliminates the need for web-safe fonts.
Web-safe fonts are those commonly found across computing platforms. Prior to CSS, a font-family relied upon what was installed on the recipient’s computer. If a user ran Microsoft, the Web browser would automatically check for core fonts (such as Verdana, Arial, or a generic sans-serif).
The font-family property for paragraphs might be defined in a style sheet like this:
p { font-family: 'Verdana', 'Arial', sans-serif; }
This approach restricted Web typography in both typeface choice and letterform flexibility. CSS simplified webpage design, without disrupting pre-existing code.
The advent of CSS has virtually eliminated the problem of having fonts with incompatible aspect ratios that create unreadable documents. If a designer wanted to use an off-beat font (like, Pupcat, for instance) to spice up a page design, she would run the risk of that font not being installed on an end user’s platform. If the user’s fallback fonts don’t share the same aspect ratio as Pupcat, page elements are likely to overlap and misalign.
Work-arounds include creating an image of the text, or using Flash. These options aren’t optimal, though, since images are not searchable, nor part of the structure of the document. Both of these factors affect search engine optimization.
Enter CSS and the @font-face rule. It’s a simple concept: it lets the user define where to find the font-family. Once you upload a font file to your web server and define it with the rule, browsers will be able to use the specific font files served at your web host. Some Web typography services, like TypeKit.com, even offer to serve the fonts for you.
The general form of an @font-face rule is:
@font-face { }
Whereas has the form:
descriptor: value;
The refers to your name for the font. This is what you’ll use later in your style sheet and HTML. For example:
@font-face { font-family: myfont;
Next, you must specify where to find the font file:
src: url(http://www.mysite.com/fonts/geranium.oft); }
You may name the font-family and file different things:
@font-face { font-family: myfont;
src: url(http://www.mysite.com/fonts/geranium.oft);}
The last step is to use it as a usual property for an element:
p { font-family: myfont, serif; }
So when you employ the element in HTML…
My paragraph with a weird font.
…will appear using myfont!
The font-family property defines sets of font-faces, not an individual font. The property may refer to a specific font-family or one of five generic groups of font-families: serif, sans-serif, cursive, fantasy, and monospace.
Modern browsers, such as FireFox, Safari, Explorer, and Chrome, use combinations of file formats. One of the benefits of the CSS @font-face rule, however, is cross-browser compatibility.
The source also allows for use of a font at your local computer:
src: local('Edwardian Script ITC')
Other optional descriptors that can be used with @font-face include: font-style, font-weight, and font-stretch for font property descriptors. A font-variant descriptor is used for specifying ligature, caps, and numeric variation.
If you’re ready to abandon the limitations of web-safe platforms, check out Font Squirrel for a free web kit generator that converts your font to all formats and also generates an @font-face CSS snippet.
Both Font Squirrel and Font Spring provide free, legal-to-use fonts. Font Shop, on the other hand, allows you to purchase font foundries, priced between $50 and $500.
