,

Ultimate guide to typography for websites and blogs

   

Typography. Why does it matter so much? Typography is the essence of all understanding. The knowledge that we derive from any text comes from our understanding ofthat particular piece of text. For understanding the first and foremost requirement is that the font is legible. Every website has a soul, a kind of unique feel that is native to that site only. That particular feel is derived from how the text is arranged on that website. Our primary understanding of language comes from the symbols used, fonts can be thought of as distinct images which convey a message. Different fonts convey different moods and feelings. As you must have seen the most popular font used for captions in images as well as memes is “Impact”. This is simple to understand, it’s just because the typeface Impact has too much of design oomph i.e a persona which emanates through it, similarly some fonts are too simple.The right balance usually is to find a perfect mix between these fonts. Once you get that combo right, then the overall design shines through. Another interesting thing that I use in my personal projects is that I combine different font families of the same font. So today we bring to you the Inspire2rise Ultimate guide to typography for websites and blogs.

Reading - Ultimate guide to typography for websites and blogs.

Know the differences : Serif and Sans-Serif.

Serif and Sans Serif are essentially two different species of fonts, Serif fonts have strokes/extensions at the end of every letter , have you ever seen the Times New Roman font, it’s one of the best example of Serif fonts. Such fonts are mostly used in books, reports and places which have large chunks of text in compact forms. Serif means extensions ( or maybe something like that ), sans means without so Sans serif fonts are without extensions and certainly do look more appealing to the eyes in many cases.

Know the differences : Typefaces and fonts.

Simply put many people often use the terms fonts and typefaces interchangeably though there is a subtle difference. Font is what we the designers or you the user use for creating something and typeface is what we see in end result.

Ultimate guide to typography : The Right Color.

The right dash of color can make your designs and website stand out. Trust me, nothing looks good than a dash of right color mixed with some whites just at the right places. But never go overboard with the colors, spraying red, yellow, greens and blues all around the place just for the sake of making the design colorful is a great design blunder. Red is one of the most appealing colors, but only if used wisely. For an example: This is one of my favorite color combinations: Use grey, darker shades of grey and white on an off white background, and put the call to action text ( call to action is something that makes people do something, it can be a link to some sales page or some other page ) in bold red, this makes the design coherent and the appeal is magnified a hundred times.

Using color in limited doses makes a design appealing and easy on the eyes. Never compromise with readability for over the top colors and fonts.

Reading - Ultimate guide to typography for websites and blogs.

To do’s for good typography :

  • Readability : MakeUseOf.com is an example of the most awesome readability I have ever seen. They use a light grey background with a dark shade of grey as the font color, this makes for an amazing overall reading experience. The kerning is also well optimized on their site. Kerning stands for the gap between different words, irregular kerning causes difficulty in reading the font. Leading stands for the spaces between individual lines of text. Appropriate kerning and leading make sure that the font used is perfectly legible. I would suggest that you adjust the kerning and leading manually and don’t rely on default spaces provided by the font, doing so will help you in perfecting your design.
  • The larger, the better : Sometimes large fonts are better, more pleasing to the eye and suits the reading flow. Always maintain a font size between 14-16 for more readability, and for headings I have found the exceptionally large fonts to work good. As can be seen on Medium.com
  • Contrast dark and light : White and black are fundamental colors, if you use the m carefully, then these two colors alone are capable of creating effects that no other color can do. You want to see an example of this, then visit Hauska.co.kr
  • Use proper spacing, don’t justify : Using justify can only make the spacing go awry, it makes sure that the text is justified on both left and right margins but in doing so it kills the spacing between the words. So use justify sparingly and only when it’s too important.
  • Use Italics and bold to emphasis : just like I have done throughout this post, use italics and bold for drawing attention to important chunks of text.
  • Use strike through and underline only when necessary : Strike though feels like a no- no add on for fonts. Underline looks good but only when used in the right context, when amongst a lot of text you have to highlight a particular word then underline comes in handy. But you can do so with other changes too, so I would personally recommend to use them as little as possible.
  • The Alignment : Trust me, alignment is what shapes most of the reading experience. Always adjust it according to the available space and I would give you some guidelines.Left alignment works well for body text, because people are used to reading left aligned articles and most people write too in that way.

    Center alignment looks awesome for headings or some out of the blues titles. Using it anywhere else looks like an overkill.

    Right alignment looks good on Service websites, or on things which need to express a quality of professionalism and industry rigidness. It looks awesome on invite cards, business cards, and other official stuff.

Reading - Ultimate guide to typography for websites and blogs.

Sites with excellent typography resources : The BIG LIST!

While scourging the internet in the hunt for perfect fonts, I came across many websites which offered awesome typography resources. I would like to share the same with you, my readers! If you ask why, then my answer would simply be, “because I love you all”.

  1. MyFonts
  2. Thinking with Type
  3. CounterSpace
  4. Typeworkshop
  5. Elements of Typographic style applied to the web
  6. Typographica
  7. I love Typography
  8. Typophile
  9. Cavendish Gallary of Print and Typography
  10. Typography Terminology ( PDF )
  11. Humanist Styles Typography
  12. Old Styles Typography
  13. Transitional Type typography
  14. Modern typography
  15. Type culture
  16. Guide to typefaces and layout
  17. Another guide to typography
  18. The Font feed
  19. Helvetica Film
  20. Type classification Ebook

So did you like this awesome guide to typography by Inspire2rise.com, if yes then do comment below with your views.

see you soon inspire2rise
See you soon on Inspire2rise.com!

 Better subscribe and keep visiting for more such awesome posts!

Follow Inspire2rise on Twitter. | Follow Inspire2rise on Facebook. | Follow Inspire2rise on Google+.

Written by Aditya Nath Jha

Aditya Nath Jha is an Engineer from New Delhi, India. His areas of interest include Gadgets, WordPress, speed optimization & latest technology.
When he is not busy blogging he loves to write poetry, compose his own songs and has a taste for music! Find me on Facebook, Google +, Twitter, Linked in.
And watch my videos on Youtube.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Loading…

Facebook Comments

Google Nexus 7 2013 Review and new features

Google Nexus 7 2013 Review and New features

MOTO X Review and New features

MOTO X Review and New features