Typography In Web

In the aspect of web design, a big element of a site is the type. Typography refers to making written content not only readable but also appealing in appearance. While the content itself is important, more often than not users are unaware that there Hierarchy is fundamental in typography and plays an immense role as to how designers achieve great readability. In type, a single typeface can have several different versions. Two versions of this font are illustrated below.

This is important text.

A designer can achieve good hierarchy by different means. Choosing a typeface is one step, however, using its different weights and versions is another. The text above this is using the bold/italic version of the font which gives it the slanted and heavier look. Depending on which typeface you choose, these versions may not be necessary. Typography itself has several different branches into which fonts fall in. A few of these categories include serif, sans serif, slab serif, and transitional.

Delving deeper into typography, letters themselves have different parts and those parts have names and purposes. For example, a serif font has ‘serifs’ and sans serif fonts do not. The word serif itself means a mark off of the end of a letter; ‘sans’ is French for ‘without’, hence sans serif fonts do not have serifs. More often than not, serif fonts give off more of a formal feel as opposed to sans serif typefaces due to the history of how they came to be and where they are used more often.

“Typography is the craft of endowing human language with a durable visual form.”

Robert Bringhurst
Author of The Elements of Typographic Style, Robert Bringhurst states the fundamental purpose of typography in a single sentence essentially saying that through typography, designers relay language in an appealing manner to ease readability. When it comes to achieving this, the use of color is often avoided. Depending on what the design is as well as the content.

In web design, colored text is almost never used. The two most common colors of type in web are black and white because in web sites, there are almost always images or other design elements that use color. Consequentially if you use colored type over an image, this is not going to be appealing to the average eye at all. On older sites, we often see a lot of text not just in color, but also with the background colored. Other types of effects on type are embossing, drop shadows, and gradients. These kinds of elements are now considered eye sores and are typically avoided. Many times they are seen as lack of design because they are interpreted to the human mind as busy and have too much going on. When this happens, the fundamental purpose of design is lost. You can think of the purpose of design to be making information visually appealing and easy to absorb. So, when you have drop shadows on text with a colored background that’s embossed, the mind isn’t going to like this.

Due to there being so many different types of typefaces, designers have a lot of tools available to them and one of them is the combination of fonts. Let’s say you are designing a web page, ideally you want your headers, which is typically what people skim for, to be clear and as legible as possible. For this, it’s clear that we want a font that is readable and still somehow appealing to the eye. In type there are Display Fonts which are used for small amounts of text that you would want to stand out on a page. Other ways to achieve type design is to use good pairing of fonts. Each typeface has a different level of readability; therefore, some fonts are better for body copy as opposed to fonts with less readability.

On sites with lots of text, more often than not, users tend to skim at the sight of a wall of text. To create interest, the use of typography can be very effective. Typically, a site will have headers to indicate a subject, followed by a paragraph or two regarding the topic. Earlier, I had mentioned display fonts and these types of fonts are the ones that make text stand out and appealing to the user, thus enhancing more interested in the topic. This kind of interest is what the art of typography is all about.

In any given design, you can be dealing with any range of topics and through well-chosen typefaces, a designer can make information a client has, not just easily readable but also make the readers eyes move smoothly along a page.

In conclusion, typography is a strong tool in a designer’s tool kit. In web design, large blocks of text are often obstacles when dealing with content and through typography, it is easy to tackle these types of challenges. One thing is to deal with big text blocks; another is to generate genuine interest from a user to be intrigued to read this text. All the diverse versions of an individual typeface can be used to achieve this and sometimes even color. Hierarchy is a vital portion that goes into typography and when dealing with web design it’s no different. A final point is that with web, we’re not just dealing with computers but also tablets and mobile devices. The typography has to be thought through for each type of device and not just the design but sizing as well. All of these elements are just the digital aspect of typography while in it’s true organic form, typography takes much more than just sizing and design to achieve.

Leave a Reply