Some notes from the Typography class taught by Prisca…
TYPEFACE AND FONT – THE DIFFERENCES
Typeface: The design, shape and form of the characters. It can also have variants such as bold, italic etc but keeping the original typeface intact. These type variants combined become a font family.
Font: The file which allows the final type to be applied to the design. A font is something you use – in a digital format for example.
Definition: A font stack consists of a list of fonts, defined in the font-family declaration in CSS. Listed in order of preference, the fonts are used when available via the end user’s computer.
There are 5 different font families used for text styling via CSS:
serif, sans-serif, monospace, cursive, fantasy.
Commonly used font stacks: (sometimes default on coding apps eg. Dreamweaver)
- Arial, Helvetica, sans-serif
- Courier New, Courier, monospace
- Times New Roman, Times, serif
- Georgia, Times New Roman, Times, serif
- Verdana, Arial, Helvetica, sans-serif
- Geneva, Arial, Helvetica, sans-serif
Building a Font Stack: Take care to select fonts which are ‘comfortable’ with each other, which are similar in x-height, character width as well as weight and you will ensure your nicely crafted layout will not be compromised if your preferred font is not found.
Tools to help with building font stacks:
WEB FONT FORMATS:
When using @font-face it is useful to know what the font formats are:
- EOT: Embedded OpenType: .eot
This early font format by Microsoft is proprietary and exclusively supported by Internet Explorer. EOT fonts are required for all versions of IE, especially for all earlier versions. Only IE9 includes support for the WOFF format as well.
- TTF: TrueType: .ttf
Developed by Apple as a competitor to Adobe’s Type 1 format, used in PostScript. TTF fonts were soon widely adopted as the most common format for system fonts and are now compatible with most operating systems.
- OTF: OpenType: .otf
The OTF format was developed by Microsoft and Adobe and is based on the TrueType format. It does include typographical features such as ligatures though these are not yet fully supported by all browsers.
- WOFF: Web Open Font Format: .woff
The WOFF format is currently in the process of being standardized and the W3C who published a working draft in July 2010 is expecting it to become the interoperable format which all browsers will use in future. It is important to note that WOFF is not actually a font format per se – but rather a wrapper containing fonts such as TTF and OTF.
- SVG: Scalable Vector Graphics: .svg
SVG fonts are different to other font formats as they contain the letter outlines as vector objects. SVG fonts are usually quite heavy in file size as they do not have the compression built in as other formats do. The most common use of this format remains either the iPhone and iPad, prior to iOS4.2, or their implementation via web font providers (as covered in more detail later).
- Check licencing before use
- How the @font-face rule works: by linking the font file to your style sheet much like linking an image. The font file can be hosted local or on the server.
- If the file needs formatting: This is if you are using a font file that you have on your computer and need to convert it for the web. There are plenty of tools but the @font-face generator by FontSquirrel is really good.
- Writing the CSS:
Load the font:
src: url(http://site.com/fonts/fontname.otf) format(‘opentype’);
Apply the font:
font-family: font family name, font family;
- Catering for different browsers by linking fonts as different formats:
src: url(‘fontname.eot’); /* IE */
src: url(‘fontname.woff’) format(‘woff’); /* for all modern browsers */
src: url(‘fontname.ttf’) format(‘truetype’); /* for Safari, IOS 4.2 & Android */
- Browser compatibility issues:
Refer to these articles: “Bulletproof @font-face syntax” by Paul Irish
and The New Bulletproof @Font-Face Syntax by Ethan Dunham.