In any layout, whether in print or on the web, typography is critical to the overall design of the piece. Selection of the appropriate fonts, sizes and colors can make or break a design, not to mention enhance or decrease its clarity. Typography is a highly detailed subject, but there are some basic fundamental concepts that can be learned quite quickly and applied to website design immediately.
The Main Categories of Fonts
There are literally thousands of fonts available to use today. Remarkably, around 20 years or so ago, there were less than 300. Thankfully, in web design, there are only a certain number of fonts available that you can be sure that will display on most people’s machines. Most computers have a basic number of common fonts, though others can be downloaded & installed manually.
The main font categories you really need to know in web design are as follows:
Serif – These are fonts with a little tail on the end of certain characters. They are also characterized by having thin thick transitions on other characters such as the letters ‘e’, or ‘o’. Furthermore, these transitions are normally at an angle. Times New Roman is a typical default font that exists on pretty much every computer.
Sans serif – Sans is the French word for ‘without’, so these are fonts without those little tails on the tips of characters. A typical example of a serif font is Arial.
Script – These fonts tend to be quite fancy, and as such should be used with care. They are often akin to joined up writing, and therefore would be quite difficult to read in blocks of text.
Decorative – Like script, and should never be used in blocks of text as they will be hard to read. These fonts are normally very creative in design and would be good to use as headlines or in logos but never as body text.
Font Families to Use in Web Design
In web design software such as Dreamweaver, you may choose a set of font families within your web page design. What these do is to set an order of preference based on the viewer’s machine. So for example, you could choose the font family of ‘Verdana, Geneva, Sans Serif’. What this does is set the page font to Verdana as default. If the viewing machine does not have this font, then it will use Geneva to substitute. If this font also isn’t available, then it will choose another sans serif font that is installed to display the text.
There are many font families that can be used in this way. Typically, the best fonts to use on a computer monitor are those fonts which are the names of cities. So fonts such as Georgia, Helvetica, New York, Monaco and so on are some of the best to use.
Serif or Sans Serif?
Serif fonts tend to be best to use in long chunks of text. Look in any book or newspaper, a serif font tends to be used most often. However, sans serif fonts can also be fine to use, but it really depends on the context of the web site. Be conscious of what you choose and ensure that the font choice you make does match your web design.
Concordant, Conflicting & Contrasting Fonts
In general terms, you should never use more than two fonts on a layout. It becomes very confusing to the eye. You should also be very aware of concordant, conflicting and contrasting fonts.
Concordant fonts occur if you use only one family without much variance on the style, shape or size. The effect is quiet and rather sedate, and most likely quite dull.
Conflicting fonts occur when you combine two typefaces which are similar, but they become disturbing because the visual attractions are not concordant, but not really different (or contrasting) either.
Contrasting fonts is really what you want to aim for. These give a strong dynamic look to the page and also make bolder statements. So you may choose to use a sans serif font for headers, with a serif font for the content. This looks and works best.
The subject of typography is immense, but basically you should aim to set your font families to best match your page design, and then choose only two fonts which contrast well to one another to produce an effective and strong layout. You should also choose your colors wisely and contrast these well to their backgrounds so they can be seen easily, but that is a topic for another article. Most importantly of all, your content should be easy to read, contrast well and invite the viewer to want to read more.
The post Introduction to Typography in Web Design appeared first on Focus Designer.
