Oftentimes, when the deadline nears, the designers, neck-deep in work, quickly wrap everything up pushing all the problems under the rug.

Because of doing the work in a hurried manner, they forget to work on some crucial design elements. Fonts are among them; a site without captivating fonts is like food without salt. The latter is a culinary disaster and the former is a marketing disaster.

The importance of fonts

Select fonts carefully if you don’t want your business to meet with a disaster. If the existing fonts don’t fascinate you, hire a designer and have him design appealing fonts for your site. Fonts can result in overwhelming success or total failure for a site.

That’s because the minimalist design trends are all the rage now and designers who follow those trends, prefer weeding out all the unnecessary design elements including the header image. Now since there’s no header image, you need fonts to fill the gap.

Beside this one benefit, fonts come with many other benefits. It’s not surprising that with web typography gaining relevance, new fonts are being developed everyday.

Web typography techniques

You might outsource the work to an experienced designer. But that doesn’t mean there’s any harm in gaining an understanding of typography and associated techniques. Fonts are the most important aspect of it, and other components are baseline, letter spacing, cap height, X-height, etc.

Here’s a quick glance at them:

• Baseline: It’s a line on which the letters sit. The line won’t be visible to you when you’d visit a site, but you can find all the letters of a text are resting uniformly, thereby enabling you to draw a straight line.
• Cap height: It is the baseline on top of the capital letters. Cap height indicates uniformity across the height of the capital letters.
• Descenders: You may notice some letters coming off of the baseline. Like the extended part of “Y” in the word “Toy.” They are called descenders.
• Letter spacing: The gap between the letters differs from one font to another. But whether it increases or decreases, the spacing is always consistent.
• X-height: Half the distance between the baseline and the cap height is called X-height or corpus size.

Emotions of characters

Being meticulous about the techniques described above can bring technical perfection. But don’t stop at there as the design industry has begun to push out the “Human Era” in branding. To march in that direction, you need to bring out the emotions of each single letter, and if that doesn’t work then each single character.

It’s possible when you juxtapose the following:

• Typeface
• Color
• Texture

Typeface, aka the font family, not only refers to fonts but symbols, letters and special characters. When choosing a typeface, make sure it falls in line with the theme of the site. If your site is for the kids, choose a flashy or a retro typeface such as Chaplin Type, Kingthings Flashbang or Bobber.

As for colors, keep yourself from throwing random colors unnecessarily and follow the relevant guidelines of W3C. It’s best if you use flat UI colors as they bring stability and tranquility to a design.

For perfect textures, work with rem instead of em. The benefit of rem is it allows you to scale the type across a large area, which gives you more control over the design of that page.

Enters CSS3

Be it the font or any other typography element, CSS gives you the freedom to work on the micro levels. If you want a particular line or a letter to have a style that’s different from what it already has, use CSS3 as it allows for that.

The CSS3 pseudo classes let you select the first child, first line and first letter of the paragraph tag. The classes are first-of-type, first-line and first-letter.

Applying CSS3 means you are using responsive typography techniques, which takes care of the following:

• Application of a typographic scale.
• Developing a font stack.
• Appropriate line lengths.
• Use of media queries to set typographic break points.
• JQuery tools to control type.

Harnessing the benefits

The benefits of web typography outweighs the disadvantages. When you harness the benefits, your site gets a makeover and appeals to the visitors.

Image Courtesy: www.design.vstudents.org