Typography - Part1

Typography on the web has grown substantially over the last few years. There are a couple of different reasons for this rise in popularity, however none more recognized than the ability to embed your own web fonts on a website.

In the past designers were limited to a small number of typefaces they could use on a website. These typefaces were based off what were the most commonly installed fonts on a computer, thus most likely to render properly on screen. Now with the ability to embed fonts designers have a much larger palette of typefaces to choose from.

While the ability to embed fonts opens up a door to all new typefaces it also requires designers to know the basic principles of typography. Translating these basic principles of typography into HTML and CSS helped build the core of online typography and text styling.

Typeface vs. Font

The terms typeface and font are often interchanged, causing confusion. Below is a breakdown of exactly what each term stands for, hopefully adding context to how the two terms should be used.

A typeface is what you see. It is the artistic impression of how text looks, feels, and reads.

A font is a file that includes a typeface. Using a font on a computer allows that computer to access the typeface.

One way to help distinguish the difference between a typeface and font is to compare them to a song and MP3. A typeface is very similar to a song in that it is a work of art. It is created by an artist, or artists, and is open to interpretation. A font on the other hand is very similar to an MP3 in that it is not the artistic impression, only a method of delivering the artistic value.

Formatting Content

Within the previous lesson, Elements & Semantics, we talked about how to semantically add content to a page. This lesson is worth reviewing as it will play a part in our discussion on typography. As a brief review let’s recap headings, paragraphs, and how to bold or italicize text.

Headings

Heading elements come in six different levels, h1 through h6, each of which act as a supplementary heading to the one above it. The h1 heading should be reserved for larger, more important headings while the other headings should support the h1 above it. Using the HTML5 document structure elements we have the ability to reuse these headings, however we must use proper judgement in doing so.

<h1>Lorem ipsum dolor sit amet...</h1>
<h2>Pellentesque habitant morb...</h2>

Paragraphs

The paragraph element, simply put, is the preferred way to add paragraphs of content to a page. Each individual paragraph should be wrapped with an opening and a closing p tag.

<p>Id quil una virtute ponunt...</p>

Bolding Text

To bold text the strong element is used. The strong element not only makes text bold but it also semantically notes it as important text on a page.

<p>Duis in <strong>voluptate</strong> velit cillum.</p>

Italicizing Text

Italicizing text is accomplished using the em element. The em element is also known to semantically mean that the text should include a stressed emphasis.

<p>Quae vivendi <em>putanda</em> est, expeteretur nih.</p>

Text Color

Typically one of the first things a designer or developer will do when building a website is choose the text color and typeface. While there are a number of other properties that could be changed, these two have the largest impact on the look of a page in the smallest amount of time. Getting rid of the browser defaults and using your own text color and typeface immediately begins setting the tone of the page.

The only item needed to set the color of text is the color property. The color property accepts one value, however in many different formats. You can use keywords, hexadecimal values, RGB, RGBa, HSL, and HSLa. Most commonly seen arehexadecimal values as they provide the most control with the least amount of effort. RGBa values are on the rise with CSS3 to provide transparent colors, however they are not fully supported within all browsers and should be used with a hexadecimal fallback accordingly.

body {
  color: #555;
}

Shorthand Hexadecimal Color Values

Hexadecimal color values, like many other property values, allow us to use shorthand values. Hexadecimal colors are declared using the pound sign (#) followed by six characters. These characters identify the specific color to be used and often come in patterns of pairs, the first two characters, the middle two characters, and the last two characters. These patterns can then be compressed down from six numbers into three for the color value. For example, the color value #555555 can be shortened to #555, #ff6600 can be shortened to #f60, #ffff00can be shortened to #ff0, and so on.

Font Properties

CSS provides a lot of different properties to edit the look and feel of text on a page. The properties to do so are broken down into two categories, font based properties and text based properties. Most properties corresponding to these categories will be prefaced with either font-* or text-*. To begin we’ll discuss the font based properties.

Font Family

The font-family property is used to declare which font, and fallback fonts, should be used to display text. The value of the font-family property contains multiple font names, all comma separated. The first font declared, all the way to the left, is the primary font choice. Should the first font not be available alternative fallback fonts are declared from left to right. Font names including two or more words need to be wrapped in quotation marks. Additionally, the last font should be a keyword value, which will pick the system default font in the specified type.

p {
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

Font Size

Using the font-size property provides the ability to set the size of text using common length values, including pixels, em, percents, points, and font-size keywords. More and more often the pixel value is used as it provides the most control over a font’s size. Previously, em and percentage values used to be fairly popular because they allow the text to scale relatively when a user would zoom in on a page within the browser. Now most browsers are able to scale pixels as well, eliminating a large need for em and percentage values.

p {
  font-size: 13px;
}

Font Style

To change text to italicized and vice versa the font-style property is utilized. The font-style property accepts four keyword values, including normal, italic, oblique, and inherit. Of these four, most commonly used are normaland italic. italic being used to set text to italic and normal being used to return text to its normal style.

p {
  font-style: italic;
}

Font Variant

It isn’t often but occasionally text will need to be set in small capitals, or small caps. For this specific case the font-variant property has been created. The font-variant property accepts three values, including normal, small-caps, and inherit. The most typically seen values are normal and small-caps to switch between normal andsmall-caps, and vice versa. If the typeface being used does not support small caps the variant of the font will not change. Always double check support for a typeface before using this property.

p {
  font-variant: small-caps;
}

Font Weight

Occasionally the need to set text as bold or set the specific weight of bold text appears, for this case we can use thefont-weight property. Generally speaking, the font-weight property is used with the keyword values normal,bold, bolder, lighter, and inherit. Of these keyword values, it is recommended to primarily use normal andbold to change text from normal to bold, and vice versa.

On top of keywords the numeral values 100, 200, 300, 400, 500, 600, 700, 800, and 900 exist. The order of these weights start with the thinnest weight, 100, and scale up to the thickest weight, 900. These values pertain specifically to typefaces that have multiple weights, more than normal (keyword for 400) and bold (keyword for 700). Before using numeral values check to see exactly what weights the typeface you are using comes in. Attempting to use thin weight of100 might sound like a good idea, however that weight might not exist within your typeface, thus it will not work.

p {
  font-weight: bold;
}

Line Height

Line height, the distance between two lines of text known as leading, is declared using the line-height property. Theline-height takes all general length and numeral values, as mentioned above within font-size. The best practice for legibility is to set the line-height to around one and half times that of your font-size. This could be quickly accomplished by setting the line-height to 150%. However, if you are working with a baseline grid having a little more control over your line-height using pixels may be preferred.

Line height may also be used to vertical center single lines of text within an element. Setting an element’s line-heightto the same value as the element’s height will vertically center the text. This technique is commonly seen within buttons, alert messages, and other single line text blocks.

p {
  line-height: 20px;
}

Shorthand Font Properties

All of the font based properties listed above may be combined and rolled into one font property and shorthand value. The order of these properties should fall as follows from left to right: font-style, font-variant, font-weight,font-size, line-height, and font-family. As a shorthand value these property values can be stacked from left to right without the use of a comma, except for font names. A forward slash, /, separator is needed between the font-size and line-height property values.

It is also worth noting that every property value is optional except the font-size and font-family property values. That said, you can often find the font property and shorthand value to include only the font-size and font-family values.

p {
  font: italic small-caps bold 13px/20px 'Helvetica Neue',
  Arial, Helvetica, sans-serif;
}

Font Properties Example

HTML

<h2><a href="#" title="Sample Blog Post Title">Sample Blog Post Title</a></h2>

<p class="byline">Posted by Shay Howe on February 5th, 2012</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fringilla vehicula nisi vitae rutrum. Donec laoreet, arcu in elementum, dui mi auctor tortor, et lorem massa orci… <a href="#" title="Sample Blog Post Title">Continue reading →</a></p>

CSS

h2, p {
  color: #555;
  font: 13px/20px Arial, 'Helvetica Neue', 'Lucida Grande', sans-serif;
}
a {
  color: #8ec63f;
}
a:hover {
  color: #f7941d;
}
h2 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 6px;
}
.byline {
  color: #8c8c8c;
  font-family: Georgia, Times, 'Times New Roman', serif;
  font-style: italic;
}

Demo

Sample Blog Post Title

Posted by Shay Howe on February 5th, 2012

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fringilla vehicula nisi vitae rutrum. Donec laoreet, arcu in elementum, dui mi auctor tortor, et lorem massa orci… Continue reading →