Typography

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.

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.

body {
  color: #555;
}

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 normal and italic. italic being used to set text to italic and normal being used to return text to its normal style.

p {
  font-style: italic;
}

Text Align

Aligning text is an important part of building a rhythm and flow to a page, using the text-align property such alignment can be set. The text-align property has five values, comprising of left, right, center, justify, and inherit. All of these values are fairly straightforward and behave as expected. The text-align property, however should not be confused with the float property. The text-align values left and right will align text within an element, where the float values left and right will move the entire element. More information on the float property can be found in the Box Model & Positioning lesson.

p {
  text-align: center;
}

Example of Typography

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;
  letter-spacing: -.9px;
  margin-bottom: 6px;
}
h2 a {
  text-shadow: 1px 1px 0 #75a334;
}
h2 a:hover {
  text-shadow: 1px 1px 0 #d48019;
}
p {
  text-indent: 15px;
}
.byline {
  color: #8c8c8c;
  font-family: Georgia, Times, 'Times New Roman', serif;
  font-style: italic;
  text-indent: 0;
}
p a {
  font-size: 11px;
  font-weight: bold;
  text-decoration: underline;
  text-transform: uppercase;
}
Demo of above code

Welcome to Transpire Solutions

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


comments powered by Disqus