Chapter 5: Web Typography

The type of font you use in your website is an aesthetic piece as well as a text guidance piece for your audience. Carefully chosen typography can provide a natural sense of hierarchy that can guide your readers through your content. It is a valuable information tool that can greatly enhance usability. CSS today is a robust tool we can use to manipulate a variety of text properties. We no longer need to use <font> tags and create graphics for text as in the past. This is great news; flexibility in design!

One definitional note about typography – what is the difference between typeface and font?

  • Typeface: Strictly speaking, typeface is the name of the type, such as Times New Roman or Futura Condensed.
  • Font: A font refers to a typeface of a particular size, for example, Times 24 point.
  • For the most part, these two terms are interchangeable on the web.

Keep the following principles in mind as you create an effective design for your site:

  • Choose fewer fonts and sizes: Pick a few sizes and weights in a font family and stick with it. Consistently applying the same fonts and the same combination of styles gives your website a sense of identity. You can also make your site more interesting by varying the weight, size, white space and color of your text.
  • Use available fonts: Font information is user-based in HTML and this frequently serves a problem in web design. Because of the variable nature of font files, you can never be sure that a user has the specific font you used to create your website. Later in the chapter, we will learn how to specify an alternative font if your font is not installed in the user’s computer.
  • Design for legibility: Keep fonts big enough to be legible but avoid specialty fonts that degrade when viewed online.
  • Don’t use text as graphics: Remember that every graphic you include in your document needs to be downloaded (and then cached for later). This slows down the loading time of a page. Save your graphics for important purposes.

Understanding CSS Measurements

The measurement values you choose ultimately depends on the outcome medium of your document. If you want to publish an article for print, you can use inches or points (72 points to an inch). These are called absolute units. If you were to publish to a website, though, you might want to set your measurement values in terms of percentage to the viewer’s browser or to pixels. This is because the viewer’s medium varies in size and quality and is scalable. It is better to use a relative unit in this case to better suit the user’s view.

Using CSS Font Properties

The font-family property lets you specify a generic font-family name to use, for example, Helvetica. String together a list of font families separated by commas to give the browser alternatives to match: p {font-family: arial, Helvetica, sans-serif;} This is like giving the browser a list of fall-back fonts to use. If you don’t specify which font type but give the browser a generic font family, the browser will display whatever is the default: p {font-family: san-serif;} If the font family is more than one word long (has white space), the font name must be contained in quotes: p {font-family: “lucida console”}

One cool feature of CSS that gets around using default browser fonts is the @font-face property. This lets you use a font that is not located in the user’s browser or computer and define the name of the font. Fonts are usually specified in TrueType Format (TTF). Here is an example of a font-face property:


{font-family: generica;

src: url(


h1 {font-family: generica, serif;}

Remember to use a fallback font (I specified serif in the example above) in case the browser could not download your defined font.

Throughout this whole chapter in the Sklar textbook, there are tables about specifying the font family, font size, font style, font variant, font weight, font stretch, etc. I won’t take notes of them here; refer back to the text when necessary – pages 202-211. This also applies to CSS Text Spacing Properties on pages 211-223. There are many changes you can do to your text to make your webpage look snazzy!


Check out dash from general assembly. Make your own website projects. Learn html/css and javascript.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s