Typography Tips to Make Your Next Design Look Awesome

When I first began my journey as a web designer I didn’t put much thought into the text I was putting into my designs. I was more concerned about colors and images. As time went on I started to become more and more aware of how use of quality typography can influence a design. Websites exist primarily to provide users with information. A good portion of that information is in the form of text, so why not give it a little bit of design love? Sure, most site users aren’t going to think about how much effort you’ve put into the typography, but they WILL notice if it’s easy to read.

Typography can be hard to grasp. (I myself can’t claim to be an expert.) However, with the knowledge of a few key terms you can create designs that look great and are easy to read! These are a few of the tips I’ve used to take my designs to the next level.

Measure:

In typography, measure is the length of your line of text. A good measure for a single column of text is between 40 and 50 characters long, including spaces. A measure of 45-75 characters works well if there are multiple columns of text, with 66 characters being the ideal length. For this exact reason newspapers and magazines often use multiple columns of text instead of one large block.

Baseline:

The baseline is the line upon which the bottom of most letters rests.

Leading:

The leading (or line-height) is the space between two baselines. Usually the standard leading for a font is sufficient, however there are some cases where you may need to adjust the spacing between baselines. For columns of text that are wider, you will want to increase the leading. If the leading is too small for a column of text, users will have a hard time transitioning from one line to the next while reading.

A good rule for body copy is to make sure that the leading is at least 1.5 times the size of the font.

Take a look at the image below. Which paragraph is more comfortable for you to read?

The paragraph to the right uses a leading that is 1.5 times the font size. The letters don’t feel as crammed together and you can easily transition to the next line making it much easier to read than the paragraph on the left.

Tracking and Kerning:

Tracking and kerning are quite similar. Tracking is defined as the distance between characters in a whole block of text. Kerning, on the other hand, is the distance between two specific characters. If the tracking is set for a paragraph, you may still need to adjust the kerning for a few letters.

Looser tracking will look best for a wider column of text. Increasing the tracking can also add visual emphasis on words in a design.

The kerning may need to be adjusted for certain groups of letters in order to give the appearance of equal spacing between all characters. II, AV, and YA are a few examples of these groups of letters.

Avoid Orphans and Widows when Possible:

Try to avoid orphans and widows when creating a layout. Orphans are the one or two words that are at the end of a paragraph that create the appearance excessive amounts of white space between paragraphs. A widow is a line of text from one paragraph that is hanging out in another column of text.

Color:

Lets talk color for a moment. Using black text on a white background and vice versa is often times a bit too hard on the eyes. Try using a dark grey text instead of black on a white background, or very light gray text on a black background. Also try decreasing the weight of the text on a dark background. You’ll be pleasantly surprised to find it slightly easier to read!

What font should I use?

One question that comes up frequently is what type of font, serif or sans serif, should you use for body copy? For print it is thought that serif fonts are easier to read because the letters are more distinctive and recognizable. For web it turns out that sans serif fonts are actually a better choice. The reason for this is because some serif fonts do not render well on certain browsers and causes the text to look muddy.

Here at Keystone Click we prefer to use one of the core web fonts for body copy (Arial, Helvetica, Times, Trebuchet and Tahoma to name a few…) since most users will already have these fonts installed on their devices. This not only helps to decrease the load time of your website, but it also prevents the design from appearing wacky if the user doesn’t have the ability to view that specific font.

Break it up!

Do you have a big block of text that is looking a bit dull? Try to break it up by putting emphasis on certain terms by making them bold or italic. Use a block quote to highlight a certain phrase and break up that block of text. Showing hierarchy by varying the font, weight, or color for titles and headings will also add that visual interest you need.

Next time you are working on a design try and follow these few pointers. I guarantee you will notice your designs begin to look much cleaner and more professional.

In need of more tips, or looking for someone to design your new website? We would love to help you out. Be sure to contact us!

via Business 2 Community http://ift.tt/1krGYvt