Typography
What is Typography?
In essence, typography is the art of arranging letters and text in a way that makes the copy legible, clear, and visually appealing to the reader.
Typeface vs Font
A typeface is a family of related fonts, while fonts refer to the weights, widths, and styles that constitute a typeface.
There are three basic kinds of typeface: serif, sans-serif, and decorative (cursive, fantasy, monospace).
Serif and Sans Serif
The two most commonly used typefaces are Serif and Sans Serif.
Serif - employ little extra ligatures on the letterforms. Those extra pieces are called serifs. Common serif fonts are Georgia and Times New Roman. Serif fonts work great for large text like heading as well as long passages of text and body copy.
Sans-serif - do not have ligatures. The name means without serifs. Popular fonts in this category include Arial or Helvetica. Similar to serifs, sans-serif fonts perform equally well in headings as well as body content, although some experts prefer that large blocks of text avoid sans-serif fonts because they're harder to read at small point sizes.
Web Safe Fonts
In order for a typeface to show on a web page, a visitor must have access to that typeface on their computer. The easiest way to access a typeface is if it's already installed on the computer.
Most people don't ever intentionally install typefaces on their computers. Instead, they simply rely on the typefaces that get installed with the operating system and other software.
After comparing typefaces across different operating systems and common software packages, you are left with a very small subset of typefaces, referred to as web safe fonts. These are typefaces that you can be reasonably sure are installed on all computers.
What happens if we ask for a font that the user doesn't have? The font doesn't display. A different font is used instead (usually chosen by the browser).
Font Stacks
A font stack is a set of fonts that are specified in order of desirability, so that the browser can use the first font available in the list.
Font Embedding Services
Font embedding services host the typefaces on their sites and allow you to link to them. Google host a service that has free fonts and is very popular.
Adobe Fonts and Cloud Typography offer subscription services
To include an external font, there are two methods. It appears from the stack overflow discussion, that the link method is preferred.
Link
Import
CSS Font Properties
font-family
Specify a font-stack as a comma-separated list of fonts.
font-size
Specified in units, such as px, em, rem. Also, can be specified using the built-in terms small, medium, large, xx-large.
font-style
normal, italic, oblique
font-weight
Specifies the weight, or thickness, of characters. Built-in terms include: normal, lighter, bold, or bolder. It can also be expressed as a numeric value between 100 and 900 (numbers must be divisible by 100).
line-height
Specifies the height of a line of text. Expressed as % or em and must be greater than the height of the font or else the lines of text will be squished together.
For maximum readability, the W3C's Web Content Accessibility Guidelines 2.0 calls for the line-height of blocks of text to be at least 1.5em or 150%
text-align
Specifies how text is aligned horizontally. This can be either left, right, or center.
letter-spacing
Specifies an amount of space between letters.
Resources
Last updated
