When a visitor visits a website, the chances are they don't care much about the design, images, colors or sounds. They're immediately looking at the text.
95 percent of the information on the web is written language. It's only logical to say that a web designer should understand the main discipline of creating a written information, or in other words: Typography.
Text is a way to deliver information in the most basic form. Although design has a crucial part in creating a website, typography is something to consider if someone wants to deliver a message in a great and outstanding presentation.
When design is a decoration, reading text is what people are accomplish to do when they visit a site. Information design is not about the use of good typefaces, it is about the use of good typography. This is actually a big difference. Anyone can use typefaces, some can choose good typefaces, but only few master typography.
With that alone, typography, the art of arranging type, is a priority. For a long time typographic style and its accompanying attention to detail have been overlooked by website designers. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse.
Typography, as an integral part of design, is used all over a website. Ranging from large headlines, bold blocks of text, color text, smaller-sized text and others. Typography is not just an important part of a web design, but it's also a combination of art and science.
The Basics of Typography in Web Design
Typography seeks to create a greater meaning by thoughtful and deliberate selection font, size, color, layout, alignment, and other factors that affect the design of type on a page. There are two major classifications of fonts to choose from: serif and sans serif fonts.
Serif fonts have serifs or extra embellishments at the end of stokes.
Sans serif fonts are without serifs; no extra details are found on the end of each letter.
There are many differences in handling type in print and the web. Things to think about with text on the web are contrast, color, readability, and size.
Colors on a monitor screen are created by light. Black text on a white background is the easiest to read because it provides the most contrast. Color theory and color choice play an important role in web typography.
Sans serif fonts have been proven to be more easily read online in body copy because serifs make it tougher for the eye to follow, while the opposite is true for printed text.
Although at an increased size and with more leading - the amount of additional vertical space between lines of type - sans serif fonts can still work well on the web. Serifs work great in headlines and headings because they give a special accent to a headline and because serif fonts are easy to read when dealing with smaller quantities of text.
Size is an important factor to consider when choosing font styles. Text that is too small is difficult to read, but text that is too big takes up too much space, and that can change the balance of other design elements and white space.
Controlling the Fonts
Using a font because it looks interesting might give acceptable results, but really practicing the art of typography involves understanding typefaces and what they mean. Picking a good-enough face isn't that difficult, but choosing an appropriate one that fits comfortably within its environment, theme, societal and technical concerns can be tough.
Start by picking a text face for body copy, as this is what a reader will spend the most time looking at. For body copy, look for typefaces that are sturdy and legible at smaller sizes, and for those that have a healthy contrast between characters. The best text faces generally have some personality, but not so much that it distracts from the content or experience of reading.
There are many settings that control the way fonts appear on a web page. The three most popular units of measurements are: em, percentage (%), and pixels (px).
Em is a widely used form of typographic measurement for web designs because it scales well and can give finer increments of size (i.e. 1.35em). On the other hand, pixels are measured relative to the screen resolution and give a bit less control because web designers can only use whole numbers (i.e. 2px).
Percentages for font sizes are used often because they give the user control of font sizes. The size is determined by their browser's font size settings.
Other possible and less popular units of measurements are:
- Points (pt).
- Pica (pc).
- Inches (in).
- Centimeters (cm).
- Millimeters (mm).
- X space (ex).
Using pt is good for print stylesheets because they are measurements for print unit. Points shouldn't be used in web pages because there are big differences between browsers when using points; Mac OS computers tend to show text 25 percent smaller than PC computers.
Lack of typography consistency is one the biggest mistakes new web designers make. Font properties are best controlled globally, and it’s good practice to set the font family, size, color, line height and weight for the body element of all pages through CSS.
Choosing from the web safe fonts will ensure better control over what text will look loke on all browsers and operating systems. The most popular fonts are:
- Arial (Mac OS equivalent is Helvetica).
- Times New Roman (Mac OS equivalent is Times).
- Verdana.
- Georgia.
- Courier.
Other popular fonts that are also used often:
- Impact.
- Lucida Console (Mac OS equivalent is Monaco).
- Lucida Sans (Mac OS equivalent is Lucida Grande).
- Palatino.
- Tahoma (Mac OS equivalent is Geneva).
- Comic Sans.
- Trebuchet MS.
Choosing fonts that are too similar is not a good choice, and should be avoided by carefully looking at the style of fonts and the design of the site to choose something that is appropriate. Pairing two sans serif fonts is a bit difficult but is certainly a viable option. One of the easiest ways to quickly create balance and contrast in typography is to choose a serif and sans serif pairing. Most serif headings pair well with sans serif fonts for body text.
Many typefaces have an inherent connection with a cultural period or subculture. Depending on the web design, this could be an advantage or a disadvantage. It's always best to follow up on potential typeface choices by finding out where and when, and for what purpose they were made. Sometimes a typeface can have the right "look" but evoke the wrong connotations.
Pairing typefaces for typography has no law. Information for pairing different types of fonts are just guidelines. There are a myriad of types and styles, and sometimes people are surprised what typefaces work together even when logic says they shouldn't.