Introduction to Web Typography

Advertisement

Typography is a vast field covering everything from text for print to web typography, and everything in between.  With all sorts of unique jargon such as kerning and serifs, it can be quite overwhelming to wrap your head around when initially jumping into the design field.  However, having a solid grasp of typography is important for any designer, whether you focus on the web, print or some other medium.

To be frank, on the Web, fonts can look seriously bad. There are a lot of variables regarding the way each of us see them and some limitations when it comes to what we could do about it. There are certain basic typographic rules all the web designer should pay attention to. You have to be very careful and yes, intelligent in order to use fonts in web design.

In this post, we’ll look at web typography and understand which fonts you should use and why.

If the fonts you see on the screen look horrible when you navigate the web, that may be only your fault. They’re too small? Blurry? The letters look straddled? Many of these details can be corrected from the user, and when you will fix your own screen, you will get a clue over the number of variables which other users have to manipulate and which will affect the aspect of the web pages you design.

Web is all about reading information, which means that our goal is to make the reading as easy as possible for the readers.

Readability or Legibility

First of all, let’s get things clear about readability and legibility, terms we assign to different things.

Readability refers to how easy it is to read a great deal of text, blocks of copy or whole pages of text. On pages that are covered only with text, the most intelligible is a serif font.

Serif, Readable

Legibility is a function of typeface design and refers to how easy it is for us to recognize short elements of text, like titles, buttons, pointers and so on or we can say that it is an informal measure of how easy it is to distinguish one letter from another in a particular typeface.

Sans Serif, Legible

Readability

There are a series of principles to respect that will guarantee more legible fonts plus a series of factors which make the fonts less legible. Even so, you don’t need to have the entire control over the fonts on a web page, because all these principles differ from the rules of print materials, tested along the time. You should carefully read the following info regarding fonts and their preset sizes within browsers, so that you will understand what you can and cannot control. When it comes to things that you actually can control, try following these principles:

–       In general, in print destined documents, we use serif fonts for large blocks of copy; on the screen though, the sans serif fonts are much easier to read. Choosing a font for a block of copy represents a concern only if you want a font to replace the one preset by the browser or if you create paragraphs or text as a graphic element in programs such as Photoshop. If not, let the visitor establish his own preset font – he will choose the one he is most custom with.

–       Don’t set the font too large – not larger than 14, for the block of text.

–       Don’t set the font too small – not under 10.

–       Never have a large amount of text exclusively in italics, uppercase or small caps and so on. Small parts of such formatting are perfect when necessary.

–       Avoid very long lines of text – never have the text stretch on all the length of the browser window. Long lines make the reading of the next text line on the screen much harder to find. Try to set the text in columns, or at least with bullets, instead of letting it flow over the whole page.

–       On the screen, shorter lines are better than long ones, although you should avoid very short lines of text. We read groups of words, not a word at a time, that’s why very short lines frequently interrupt the mental pattern.

–       Make sure there is enough contrast between the text and the background. The best contrast is between a black text on a white background; other combinations can be successful if there is sufficient contrast. Never put a red text over a bright yellow background or orange, pink and so on.

Legibility

Like in the case of readability, there are some main principles that make a font look more or less legible. Remember that these principles apply to short fragments of text: button labels, lists, pointers and so on.

–       In general, use sans serif fonts.

–       Avoid fonts like Antique Olive, where the superior parts of the letters (the small parts arising over the main body of the letter at letters like d, f or h) are only a bit taller than the body of the letter. This certain characteristic will make the distinction between “h” and “n” harder. Avoid fonts like Hobo, which don’t have inferior lengthening of the letter for p, j, q or other. Avoid fonts like Peignot, which mix uppercase with small caps. All of these make the words less legible, because you have to waste some extra time to decode. You should keep those fonts only for very special occasions and compensate for their lack of legibility.

–       Don’t use only uppercase, except you really need the rectangular aspect of a word written exclusively in upper case. A text written only in upper case is more difficult to read, because every word has the same rectangular shape. Examine the different shapes of the words up and down. We recognize these shapes when we read. But written only in upper case, UP and DOWN have the same shape. Pay attention.

Breaking the Rules

Like any rules, those too can be broken. Although you must know the rules before you can break them and you must have a clear reason for doing that. Do it consciously and after you analyzed it carefully. Compensate the rule. For example, a negative font (a bright colored font on a dark background) makes the text look smaller, but if you really want to use it, compensate by enlarging a little the font and by shortening the rows. If you really want to write the authors with a smaller font, don’t make them impossible to read, using cursive characters, a ridiculous font or very long rows.

To create an excellent aspect of the fonts in a website you must know the fonts in general.

Font Families of Font Faces

Serif Fonts – for example: Times New Roman, Garamond, Georgia; each glyph has some extra features which contribute to a better legibility in case of printing, especially with the strong contrast between the regular fonts and the thickened ones.

Sans Serif Fonts (“sans” being the French word for “without”) – for example: Arial, Helvetica, Verdana; the forms of the characters don’t include serifs and they don’t have any extra lengths, being indicated for the screen. They offer a less intense contrast between the regular font body and the aldines.

Cursive Fonts – they offer a representation of the letter body, suggesting handwriting or feather writing, the forms of the characters being partially or fully connected to each other. These type of fonts can become not legible for small sizes of the characters.

http://snippets-by-esther.blogspot.com/2009/12/first-post.html

Fantasy Fonts – for example: Critter, Cottonwood, Star Down – they can contain representations of the characters or other forms associated to each symbol (for example Webdings). You must use them with moderation.

Critter Font by Craig Frazier

http://blog.craftzine.com/archive/2008/05/critter_font_by_craig_frazier.html

Monospace Fonts – for example: Courier New, Prestige, Everson Mono – it has the property that each representation of a single character has the same height and width, unlike the previous families which had fonts proportionally spaced (for example, the letter “i” has the width smaller than the “m” in case of the letter body proportionally spaced). Because they suggest, with their shape, the typing machine, the fonts in this category are used to show fragments of source code in a programming language.

As you’ve probably guessed by reading so far, the most appropriate type of fonts to use in web pages is sans serif. Most of the websites use Arial or Helvetica.

Web Safe Fonts

Web-Safe fonts are fonts which are likely to be present on a wide range of computer systems. They are used by web content authors to increase the chances that the content will be displayed in the font they choose. Nevertheless, if it happens that a visitor to a website does not have that specified font, their browser will try to select a similar alternative, based on the author-specified generic families and fallback fonts.

You should choose font types that:

–       Fit the character of your site

–       Are widely available with many browsers and operating systems

–       Are easy to read on any computer screen.

Web-safe fonts for Windows

Serif

  • Bookman Old Style – web-safe for Windows 7
  • Cambria – web-safe for Windows Vista but not for Windows 9x/2K/XP
  • Constantia – web-safe for Windows Vista but not for Windows 9x/2K/XP
  • Times New Roman – web-safe for both Windows Vista and Windows 9x/2K/XP
  • Georgia – web-safe for both Windows Vista and Windows 9x/2K/XP
  • Garamond – web-safe for both Windows Vista and Windows 9x/2K/XP
  • Palatino Linotype – this font is included in Windows 2000/XP
  • Book Antiqua – this font was bundled with Windows 98

Sans Serif

  • Andale Mono – web-safe for both Windows Vista and Windows 9x/2K/XP
  • Arial – web-safe for both Windows Vista and Windows 9x/2K/XP
  • Arial Black – web-safe for both Windows Vista and Windows 9x/2K/XP
  • Calibri – web-safe for Windows Vista but not for Windows 9x/2K/XP
  • Candara – web-safe for Windows Vista but not for Windows 9x/2K/XP
  • Century Gothic – web-safe for both Windows Vista and Windows 9x/2K/XP
  • Charcoal – Web-safe for Windows 7
  • Corbel – web-safe for Windows Vista but not for Windows 9x/2K/XP
  • Impact – web-safe for both Windows Vista and Windows 9x/2K/XP
  • Symbol
  • Tahoma – Web-safe for Windows 7
  • Trebuchet MS – web-safe for both Windows Vista and Windows 9x/2K/XP
  • Verdana – web-safe for both Windows Vista and Windows 9x/2K/XP
  • Webdings

Cursive

  • Comic Sans MS – web-safe for both Windows Vista and Windows 9x/2K/XP

Monospace

  • Courier – web-safe for Windows 7
  • Courier New – web-safe for both Windows Vista and Windows 9x/2K/XP
  • Lucida Console – web-safe for Windows 7

Web-safe fonts for Mac

Serif

  • Bookman Old Style – web-safe for Mac OS X 10.5
  • Times New Roman – Web-safe for Mac OS X; not so common but generally accepted as web safe for Mac Classic
  • Times – Web-safe for both Mac OS X and Mac Classic
  • Georgia – Web-safe for Mac OS X; not so common but generally accepted as web safe for Mac Classic
  • Garamond – Web-safe for Mac OS X; not so common but generally accepted as web safe for Mac Classic
  • New York – These fonts are present in Mac OS X only if Classic is installed
  • Palatino

Sans Serif

  • Andale Mono – Web-safe for Mac OS X; not so common but generally accepted as web safe for Mac Classic
  • Arial – Web-safe for Mac OS X; not so common but generally accepted as web safe for Mac Classic
  • Arial Black – Web-safe for Mac OS X; not so common but generally accepted as web safe for Mac Classic
  • Century Gothic – Web-safe for Mac OS X; not so common but generally accepted as web safe for Mac Classic
  • Charcoal – Web-safe for Mac OS X 10.5
  • Geneva
  • Helvetica – Web-safe for both Mac OS X and Mac Classic
  • Impact – Web-safe for Mac OS X; not so common but generally accepted as web safe for Mac Classic
  • Symbol
  • Tahoma – Web-safe for Mac OS X 10.5
  • Trebuchet MS – Web-safe for Mac OS X; not so common but generally accepted as web safe for Mac Classic
  • Verdana – Web-safe for Mac OS X; not so common but generally accepted as web safe for Mac Classic
  • Webdings

Cursive

  • Comic Sans MS – web-safe for Mac OS X.

Monospace

  • Courier New – Web-safe for Mac OS X; not so common but generally accepted as web safe for Mac Classic
  • Courier – Web-safe for both Mac OS X and Mac Classic
  • Lucida Console – Web-safe for Mac OS X 10.5

Web-safe fonts for Linux Unix

Serif

  • Times New Roman – not so common but generally accepted as web safe for Linux Unix
  • Times
  • Georgia – not so common but generally accepted as web safe for Linux Unix
  • Garamond – not so common but generally accepted as web safe for Linux Unix

Sans Serif

  • Andale Mono – not so common but generally accepted as web safe for Linux Unix
  • Arial – not so common but generally accepted as web safe for Linux Unix
  • Arial Black – not so common but generally accepted as web safe for Linux Unix
  • Century Gothic – not so common but generally accepted as web safe for Linux Unix
  • Helvetica
  • Impact – not so common but generally accepted as web safe for Linux Unix
  • Trebuchet MS – not so common but generally accepted as web safe for Linux Unix
  • Verdana – not so common but generally accepted as web safe for Linux Unix

Cursive

  • Comic Sans MS – not so common but generally accepted as web safe for Linux Unix

Monospace

  • Courier New – not so common but generally accepted as web safe for Linux Unix
  • Courier

It’s important to take in consideration the fonts listed above when creating content for your website. Nevertheless, you should include fall back fonts to ensure that user are experiencing the same look. Doing this will ensure that fonts are close enough to avoid any experiences like when the website is damaged due to the usage of a particular font and it is unavailable at the user’s end.

Being a web designer, it’s very important to know which are the web safe fonts. Sometimes, users might not be able to see the content on your website because of the font you used. Using the right typeface is crucial because it influences the way visitors perceive your website/business. In conclusion, it’s important to use fonts which are readable, are appropriate for the character of your website and, most important, are compatible with a wide range of computers.

Advertisement
Use your ← → (arrow) keys to browse

Login

Signup

Forgot Password

Enter the e-mail you used to signup. A password reset link will be sent to you by email.