Hi there, fellow type geek! Thanks for seeing your way to this article. Well this is the third article in a series of blogposts about Typography and Responsive Web design. We suggest you find previous articles A Guide To Typography in Responsive Design and Typography: The Subtle, secret weapon of your Website to lend proper context.

Now,  we've already talked about where typography comes from and what's designing for the new web all about. But what we didn't talk about is the simple hacks that can take you right from amateur to pro. So, here they are!  Keep reading.

Typography, especially in responsive web designing is a tricky business. So many devices, so many users. Thank god that written word is a universal way of understanding things.  But that tends to complicate things a bit. Too much to handle means a lot of important steps are skipped.

Here are some important tricks and pointers to make sure your website looks stunning!

1. Reading Vs Scanning

Remember, users scan the webpages and read the articles. There is a big difference. Are you aiming for readers or visitors? Your typography choice should reflect that.

Serif fonts are preferred for reading. Sans Serif for scanning. One makes it easy to read. The other makes it easy to attract attention. A good web page is a combination of both. Lure them in with a great sans serif font and make them stay with a legible, clear, lovely serif font.

Tip: While conventionally the previous paragraph stands true, in the new web, you'll find several web pages that are capable of using sans serif for the body text without the loss of readability. Feel free to experiment. After all, rules are made to be broken!

2. Function Vs Form

This is a mistake a lot of people make. Typography is not about beautiful font. Well, its not just about that. Ask any true type geek and they'll tell you that a highly readable, clean font is beautiful inherently.

Typography is the craft of creating text that is readable. Aesthetic nature of this craft is secondary to understanding its major function. Its function is to make the text engaging and easy on the eye to take in.

3. Tracking Vs Kerning

Tracking: Spacing between letters in a text that provide clarity and easy readability.

Kerning: Spacing between individual character sets in order to make the font more legible.

This is a mistake that often happens. Track applies to a group of characters i.e. to provide them with ample space in order to avoid a cramped text. Kerning applies to adjusting the space between two letter pairs to avoid overlapping or congestion which makes it difficult to even distinguish the word, let alone read the entire text.

4. Choices, choices!!

This one is easy. The thumb rule of good typography is a combination of two or three fonts at most. One for headline, one for body copy and maybe one for footnote, if you need.

Make sure to choose fonts which provide a good contrast. Mind your weights. Don't  use bold too much, avoid italics unless you are emphasizing in body copy and definitely, definitely, avoid excessive capitalization in headlines.

5. Colors need contrast too!

Choose your colors carefully! Don't use a white or light color on a background with anything less that 50% tints. Don't strain the reader's eye. Its lazy. They'll give up immediately.

The web is filled with great color combinations for you to choose from. And if you cannot, black text on white background works the best of all.

6. Line Length and Leading

Line Length is one of the most important things to keep track of. Especially in responsive web design. You have a limited dimension, make the most of it. The recommended line length for responsive web design is 50-60 characters. Longer lines make it difficult for reader to keep track of and they often end up re-reading the previous line.

Similarly, be careful about Leading. The term "Leading" refers to the space between two lines of text. The term originates from the practice of early typographer's placing of a line of lead between to provide text with space to breathe. A good rule of thumb is to keep your leading 25% greater than your font size for example, for a 20px text, keep leading at 25 px.

There you go! These are some of the most important tricks to make your website look awesome no matter what device it is viewed on. Responsive web design deals with typography in a no-nonsense highly precise fashion.

Remember, making it highly readable will make it very beautiful, inherently.

Vinfotech is a web development and design solutions studio with great expertise in responsive web design. Take a look at how good we are and we're sure you will want to give us a call.