Typography
Definition
Typography is the art of arranging and setting type traditionally for print and now extended to digital devices and interfaces.
Anatomy of a font
Fonts, also referred to as typefaces, can be recognized by looking closely at a particular set of defining characteristics used to describe them.
Font family
Fonts are generally divided into three categories according to their most obvious characteristics
- the presence of serifs = Serif fonts
- the absence of serifs = Sans serif fonts
- the presence of even spacing between letters = Monospace fonts
- Others include script fonts, handwritten fonts and typewriter fonts.
Note: monospace, script fonts, handwritten fonts and typewriter fonts can be either serif or non(sans) serif fonts
Thousands of variations of these families exist making up a rich selection of typefaces available for print. For the web, however, designers who wish to have some control or ability to foresee how their designs will look, must restrict themselves to fonts available on the users' systems, meaning that usually designers select amongst the fonts common to both Mac and PC systems (and even the fonts common to both do not display precisely the same).
Link: [www.ampsoft.net/webdesign-l/WindowsMacFonts.html Common fonts to all versions of Windows & Mac equivalents]
Font types
Font type refers to whether a font is normal, italic or oblique. It is the equivalent of the font-style property in CSS
A list of all CSS Font Properties
| Property | Description |
|---|---|
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |
Font sizes
In the world of print and typesetting, font sizes were measured in points (1/72 of an inch) and their size referred to the number of points from the baseline to the cap height. The typical body text font was 12 points high (12pt). Early computer monitors had a resolution of 72 pixels per inch (almost) which corresponded nicely with the print typesetting measurement of points. The default screen font in browsers was typically 12 pixels. With the improvement of screen resolutions, a physical inch on a monitor corresponds to 96 pixels. This makes the default fonts on most browsers is now 12 points or 16 pixels high.
Other measures important to type-setting and determining legibility at prescribed sizes are the x-height: the height of the letter x of a particular typeface and the height of the ascenders and descenders. The spacing between the baselines of two lines of text is called the leading or line spacing or the line-height property in CSS (See figure above).
Font sizes in CSS
An excellent overview with examples on Kyle Schaeffer's blog CSS Font-Size: em vs. px vs. pt vs. percent
Font size refers to the height of a capital "E" of a particular font face.
In HTML font sizes can be specified in various ways:
- “Ems” (em) - relative to default font preference set in browser or body text specified using CSS properties, specified in decimals, e.g. 0.5em will be 50% or half the size of the default font. Increasing font size using browser options (ctrl/cmd + "+" or "-") will increment the font size accordingly.
- Pixels (px) - specifies font size in absolute number of pixels, as resolution is dependent on the size of the pixels on a screen (e.g.: higher resolution screens use smaller pixels) the perceived size will vary from one device to another. Increasing font size using browser options will have no effect.
- Points (pt) - specifies font size in points, normally reserved for specifying print sizes. The rendering font size using points will depend on browser settings (72 dpi vs 96 dpi, or other). Increasing font size using browser options (ctrl/cmd + "+" or "-") will increment the font size accordingly.
- Percent (%) - similar to setting font size in ems, where 100% is the body text specified using CSS properties or default text size set by the browser
- Relative sizes – (x-small, small, medium, large, x-large) - where medium is the specified body text or default text size set by the browser
External font embedding
CSS can be used to embed fonts so that fonts not included in the user's computer can be used within HTML pages. This allows designers to extend font use beyond web safe fonts.
Google Fonts provides a wide selection of free and for fee fonts that can be embedded in web pages and a guide on how to embed selected fonts by linking to a Google fonts generated style sheet.
Embedding with @font-face
Fonts can also be embedded using the @font-face rule
- Font file formats and browser support
- Font sources
- Google fonts
- Font squirrel
- The 35 greatest free web fonts from creativebloq.com.
Font embedding resources
CSS tricks - Using @font-face Choosing web font
See also CSS text styling tutorial