Typography

fonts, sizes, styles & states

typography is an art form: typeface anatomy, font pairing, cogent, measure, pica, widows & orphans, etc. Behind all that lingo is an entire design discipline beyond the scope of this class. What follows are simply the tools necessary for how to realize your typographic vision with CSS.

serif's are the small lines at the ends of the letters. Serif typefaces are often used for long passages in print as they are easier to read.

sans-serif ("sans" means without), is a typeface with no serifs. It is easier to read tiny text (looks good on low resolution screens) oftentimes also used in headers/titles.

In a monospace typeface each character is of equal length (this is not the case with most typefaces). It is often times used for code because they line up in a perfect grid.

font stack

The font-family property is used to specify the typeface you want to use in a particular CSS rule. The default font-family is "serif" font-family: serif; but you can also make it font-family: sans-serif; or font-family: monospace; (see above). These will default to whatever generic serif (or sans-serif or monospace) typeface file the user has saved on their computer.

You can specify a specific typeface by name but the browser can only display a typeface (or font-family) if the user visiting the page has that typeface installed on their computer.

The font-family property allows you to set a comma separated list of typefaces as it's values, each typeface serving as a back-up for the next (in the event the user doesn't have it downloaded), this is called a font-stack & you can see a list of popular examples at cssfontstack.com.
Below are a few common examples from css-tricks.com

/* Times New Roman-based stack */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

/* Modern Georgia-based serif stack */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

/* Traditional Garamond-based serif stack */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

/* Verdana-based sans serif stack */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;

/* Trebuchet-based sans serif stack */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;

/* Impact-based sans serif stack */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

/* Monospace stack */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

font-size

 font-size: 16px; 

If you want to be exact use pixels, setting your size to 16px means the space between the top of an l & the bottom of a j is equal to 16px. Pixels are relative to the resolution of the screen, so the same px value will look larger in an 1280x800 resolution screen than it will on a 1920x1080 resolution screen.

  font-size: 16pt;  

Points is specifically for print layout (meaning: @media print { }). technically a pt is 1/72 of an inch on paper. On a screen it will vary depending on the monitors pixel density (dots-per-inch). Thus avoid using pt for web design (but keep it in your print styles).

  font-size: 100%;  

The default font-size in a browser is 16px (different for h1,h2,etc.). When you use percentage values, it's relative to the parent's font-size (if none is set, than it's relative to 16px), so font-size:50%; would be 8px.

  font-size: 1em;  

ems are kind of similar to percentages (in that they're relative to the parent or default). 1em = the default/parent size. 2em = 200%, 0.5em = 50%, etc. There's also rem but i'll let you read up on that on your own.

a little more type style

• font-weight: bold; font-weight value can be normal or bold, or 100, 200, 300, ...800, 900

• font-style: italic; font-style value can be either normal, italic or oblique

• text-transform: uppercase; text-transform value can be none, capitalize, uppercase, lowercase or full-width

• text-decoration: underline; text-decoration value can be none, line-through, underline, overline (or both underline overline). You could also change any of their color like text-decoration: underline red or make them wavy text-decoration: underline wavy; or combo all three text-decoration: underline wavy blue;

• line-height: 1.5em; line-height controls what typographers call leading, which is the amount of space between the descender (the part of a letter like y or j that falls beneath the baseline) and the ascender (the highest point of a letter like l or h)

• letter-spacing: 0.5em; & word-spacing: 2em; letter-spacing & word-spacing specifies the space between letters & words (or what typographers call kerning)

• vertical-align: super; vertical-align won't vertically center your div (common mistake), instead this has to do with an inline elements vertical relation to it's neighbor inline elements. Values include sub for this effect, or super for this effect. Also helpful for aligning img (which are inline elements) with neighboring text are middle, top & bottom values

• text-indent: 10px; text-indent the space before the first line of a body of text

• text-shadow: 5px 5px #555; text-shadow can take different arrangement of values, it can be written either offset-x offset-y color (like the example to the left), or offset-x offset-y blur-radius color or color offset-x offset-y blur-radius or color offset-x offset-y or just offset-x offset-y

There are a few more (including some newer experimental properties) you can check out here

the font: property shorthand

the font: 12px sans-serif; property is a shorthand that combines many of the above properties in a single line. There are a few ways to use it (see examples below via mdn)

/* size | family */
font: 2em "Open Sans", sans-serif;

/* style | size | family */
font: italic 2em "Open Sans", sans-serif;

/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder 16px/3 cursive;

/* style | variant | weight | stretch | size/line-height | family */
font: italic small-caps bolder condensed 16px/3 cursive;

pseudo-elements/classes

There are a few pseudo-elements & pseudo-classes particularly suited for typography. Pseudo-classes & pseudo-elements are tacked on the CSS selector when defining a new rule, like so:p::first-letter{ font-size:24px; } or a:hover { color:#ff55ff; }. a full list of pseudo-classes is available on the mozilla developer network as well as a full list of pseudo-elements. You can also find a list of every CSS selector and property in CSS-Tricks.com's almanac.

• ::first-letter (or :first-letter) selects the first letter of the first line of an element (so long as it isn't preceded by anything, like another element)

• :link used with <a> elements, defines a rule for links that haven't been visited yet

• :visited the opposite of :link, this applies to links that have been visited

• :hover not just for links, this defines styles to be applied the moment you hover over that particular element (the styles will return back to normal when you hover out)

• :active can be specified for any element that the user interacts with (like links or buttons or input fields) & applies the styles the moment the user interacts (when clicking down on the link or button for example)

• :focus defines styles to be applied when the elment has "focus", which means when you're currently engaged with the element (ex: when your cursor is inside the input field, that particular filed is "in focus")

Custom Typefaces using @font-face

The browser can only display a typeface (or font-family) if the user visiting the page has that typeface installed on their computer. A way around this is using the @font-face { } rule. This enables you to use your own custom font-files which get downloaded by the user, the same way other media elements (images, video, audio) on a page do. It requires at least two properties, font-family, where the value is whatever you want to name the typeface & a src property (with a url path to the font file)

(NOTE: because this method downloads the font itself to the user's computers, as with any media file, legally this requires that you have the "rights" to use/distribute the font file. In the next section there's a list of font-services that help ease the pain of dealing with copyright issues)

/* create your @font-face rule
  the code below assumes there's a file called myfont.woff
  in the same folder as this css file  */

@font-face {
  font-family: 'MyCoolFont';
  src: url('myfont.woff');
}

/* then you use it like this */
.title {
  font-family: 'MyCoolFont';
  color: #555;
  font-size: 24px;
}

There are many different font file formats, but they don't all work in every browser. For this reason you can have multiple src properties in an @font-face rule pointing to differnt file formats of the same font. Bellow is a chart that illustrates which file types work in which browsers. For a more thorough look at which browsers support which formats visit caniuse.com

Font Services

Maybe you're not a type designer & don't have folders full of custom typefaces you've produced (& thus have the rights to) ready to go in all the right formats for distribution on the web. Or maybe you do, but your site has so many custom fonts + downloading all those from your server every time someone visits your page takes too long & thus you need a service that can serve them up faster known as a CDN (or content delivery network), below are a list of services that handle all that for u.

• fontsquirrel.com free, download fonts à la carte. They've also got a great webfont generator which converts font files to other formats & creates the @font-face css code for u. They've also got a new matcherator which can identify the typeface in an image.

• Google Fonts "free" (like most things google), all fonts are open-source & hosted on google (ie. they are your CDN).

• Adobe Typekit free-$99 year subscription (with monthly plans available as well), gives you access to a bundle of fonts, price effects the amount of page-views (250,000+) a month & the amount of fonts you have access to. fonts are served from their CDN.

• fonts.com free-$100 / year (monthy subscriptions also available) price effects the amount of page-views (250,000+) a month, the amount of fonts you have access to (free version comes with watermark), access to special tools ( including an online font editor) & other factors.

• webtype.com $40 per font. purchase fonts à la carte. price depends on page-views (250,000+) a month. year long license (free for 30 days, longer license available). they also have a free font swapper tool, which lets you preview what a site would look like with an alternative font

• typography.com $99-$299 year subscription, price effects the amount of page-views (250,000+) a month. gives you access to a bundle of fonts. includes 5 font packages (additional come at a cost), fonts are served from their CDN

• typotheque.com 90€ per font. purchase fonts à la carte (subscription / CDN service also available)

Previous Next