Web Design Tips, Tutorials & More!

Typography Improvements

Is your typography style experiencing a bit of neglect at the moment?  It wouldn’t be surprising if the answer is “yes.” The typical designer spends less time making typography decisions than any other.  This, however, is not the best way to handle typography, and there is definitely more to making sound typography decisions than meets the eye.

In this post, we’ll look at several improvements that our readers can do themselves, whether novice or expert, to enhance the style, look and feel of typography choices. 

Measure

The length of a line, called the measure, is calculated by multiplying the type size (in pixels) by 30.  This would give a particularly accurate character measure for each type size (for 10px, measure should be about 65 characters), but why is it important?

Measure, like almost all the improvements listed here, greatly affects readability, the perspective from the reader’s eye.  Too long and too short lines have negative effects on the reader’s eye, sometimes proving to be far too distracting to hold the reader’s focus.  These are definitely issues to consider when deciding measure for your typeface.

Leading

Among all the other feat designers must perform, they must be able to read between the lines to get leading just right.  Furthermore, known as the space between lines in a block of text, there are few greater contributors to a body’s readability. 

It’s definitely important not to sacrifice readability by cramming lines together.  With larger fonts, there is some flexibility, but so many other typography factors, besides font size, depend on leading being just right.  This includes the typographic color of the text and the overall feel of the content.  

Hanging Quotes

Use the CSS code below to nail the left margin alignment, here.  The image below demonstrates when a hanging quote is done properly.  Notice how the quote hangs just outside of the margin so that it stays intact rather than broken by crooked alignment with the line below it.

Emphasis

The order of the day with emphasis is to be consistent in the type of emphasis used throughout all your content.  If you’ve chosen bold, stick with bold emphasis throughout the body of the text.  If it’s italics, which is standard for emphasis these days, stick with italics.  Inconsistencies create reading obstacles and obstructions for readers because they force the eye to adjust beyond what is visually necessary.

Try the CSS code.

Scale

Scale is what pulls the typeface together blending and balancing the size of the font in the headings, sidebars and text body.  There are basically two options to improve it.  First, you could simply go with the centuries-old traditional scale, or second, you could create your own. Either way, scale must be present in order for the user’s readability to be as smooth as possible.

Here is the CSS code for one type of scale.

Conclusion

Each of these improvements represents a different consideration involved in perfecting the typographic elements of a site and should be noted with care.  When they are considered, they make for intelligent and readable design typography.

Leave a Reply