A Typography Primer for Web Design

typography-poster-posters-quote Fluffy, large and disorganized blocks of texts are boring to read through. If you have a business oriented site, then this will greatly impact on sales. For most people out there, typography is all about settling on the proper font and typeface. Well, if you are one of them, then you are missing on much. Truthfully, this is just the tip of the iceberg as you have a great of things to master good web typography. Excellent mastery of vital details will transform your site to another level. Here are some few typography primer tips for web design that you might find very helpful.

Leading space

Simply put, it is the space between lines in the body of a written copy. If properly spaced, readability would be easier and faster. Leading has a number of effects on the general look of an article. It determines the density of text composition in what designers refer to as typography color. To achieve a proper leading space, it is important to check thins such as type size, weight, case and word spacing. For instance, a larger type size reduces necessitates little leading space. It takes time to fine up this, but settling for a 2-5pt larger than size type will be important.

Consider the measure

consider the measureHow long are your lines? Readers tend to like a balance between short and long lines. This is because short lines can be too punchy while long ones may be too boring for the reader. To be clearer, try limiting your lines to 40-80 characters. When counted, this should include spaces to enhance an optimum readability.

Enhancing a vertical rhythm

Remember, your main aim is to make it easier for the reader to see and browse through the article. It is thus very important to enhance some consistency in the vertical spaces between text blocks. For instance, if you want to keep vertical rhythm, then simply ensure the leading space equal to the size of the baseline grid. This will enhance flow as each paragraph element is aligned with the grid.

Take care of the widows and orphans Basically, a widow is the last word in a sentence. On the other hand, an orphan is a short line commonly at the end of found at the end of a column, but is separated from the whole paragraph. The two leave spaces that interrupt the reader. Try as much as you can to alter the type size, measure, spacing or spacing letters to eliminate them. You can also use a jQuery that automatically ensures last words of an element are aligned.


quotesFinally, quotes make articles lively for the reader, but can kill the consistency if not well used. You should thus consider hanging them in the margin of the body. Doing so inside the body disrupts the reader’s eye with quotations thus ailing the rhythm. Keeping them on the margin ensures the left alignment is least disrupted thus optimum readability. It is not easy to do these as some space may be lost, but consistency is gained. Generally, there is no room for typography confusion online as this will prove to be costly. There are other finer details such as emphasis and scale that you can check out on design your blog or site creatively for increased readership.

Read More:

5 Killer Web Design Tips That Will Make Your Life Easier Website design tips Web Design Tips