Typography plays a big role in graphic design and many designers are very passionate or opinionated about it. For this reason it is a very hot topic in design circles.And Typography is an integral part of design. 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 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. Your content needs to be readable to your viewers for it to be of any use. Professional Web Designers always follow the principle ‘the easier the site to read, the better it is’. There are three very useful properties to enhance the readability of your site: font, line-height, and letter-spacing.

Many effective Web pages use a small, pretty standard design with some low-key colors to help emphasize the content. This is a good use of design and color if your site fits in the “content is king” category and your content consists of articles, blogs and other forms of text.

We’ve come a long way since the start of the internet, but the use of typography is as important today as it was back in the day.

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.

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.

Web Safe Fonts

What is a web safe or web standard font? These fonts make up a group of a select few fonts that are available on most computers. This is what currently limits font choices on the web under CSS2 specifications.

Choosing from the web safe fonts available will ensure better control over what your text looks like on all browsers and operating systems. The consensus for the most popular fonts are:

Arial (Mac OS equivalent is Helvetica)

Times New Roman (Mac OS equivalent is Times)

Verdana

Georgia

Courier

So, When you work on improving your Web typography, many people focus solely on the font family they are using, the line height, and the font size (and whether they are using ems for that size or not). While these are all very important parts of a good Web typography plan, they are just the beginning..

Sources: sixrevisions.com

Photo Credit: seanburdick.com

ilovetypography.com

nathanrice.net