Web design is so important to ensure a site has a good user experience and each aspect of it can have a huge impact on the usability of your site. One of these aspects, Typography is an often overlooked, but integral part of design and something your web design company shouldn’t be overlooking.
Think of all the different uses of typography on the web, from large headlines and bold blocks of text to smaller-sized text in body copy, and you’ll soon realize that not only is it a crucial part of a web design, but that it’s a pure combination of art and science.
Typography Basics
Typography is the use of type in a 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; some call them feet or tails.
Sans serif fonts are without serifs; no extra details are found on the end of each letter.
Things to Consider for Typography on the Web
There are many differences in handling type in print versus on 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, and it becomes more important to think about contrast because it’s straining to look at and read text with poor contrast. 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 fine in body text 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 your font styles. Text that is too small is hard to read, but text that is too big takes up too much space. Find a size that works well with your design and is easy to read.
Taking Control of Fonts
There are many settings that control the way your font appears on a web page. Font size, as mentioned previously, is certainly important. The three most popular units of measurements are: em, percentage (%), and pixels (px).
Declaring font sizes in CSS is simple, here’s an example of paragraph elements being assigned a unit of 1em.
p {
font-size: 1em;
}Em is a widely used form of typographic measurement for web designs because it scales well and can give you finer increments of size (i.e. 1.35em).
Pixels are measured relative to the screen resolution and give you a bit less control as you can only use whole numbers (i.e. 2px).
Many people like using percentages for font sizes because they give the user control of font sizes. The size is determined by their browser’s font size settings.
Kerning and leading can also be controlled with your CSS. Kerning is the space between characters and can be controlled with the letter-spacing property. Leading can be controlled using the CSS property, line-height. Both are great ways to control the look of your text.