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 of that 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 a 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 examples 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 ), and 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. The font is what we the designers or you the user used for creating something and the typeface is what we see in end result.

The ultimate guide to typography: The Right Color.

The right dash of colour can make your designs and website stand out. Trust me, nothing looks good than a dash of the right colour mixed with some whites just at the right places. But never go overboard with the colours, spraying red, yellow, greens and blues all around the place just for the sake of making the design colourful is a great design blunder. Red is one of the most appealing colours, but only if used wisely. For example, This is one of my favourite colour 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 colour in limited doses makes a design appealing and easy on the eyes. Never compromise with readability for over-the-top colours and fonts.

Reading - Ultimate guide to typography for websites and blogs.

To-do’s for good typography :

• Readability: Medium.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 colour, 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 suit the reading flow. Always maintain a font size between 16-18 for more readability, and for headings, I have found exceptionally large fonts to work well. As can be seen on Medium.com
• Contrast dark and light: White and black are fundamental colours, if you use them carefully, then these two colours alone are capable of creating effects that no other colour can do. If 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 emphasise: 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 using 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. Centre alignment looks awesome for headings or some out-of-the-blues titles. Using it anywhere else looks like 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 invitation 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 scouring 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.

 Better subscribe and keep visiting for more such awesome posts!

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

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 him on Facebook, Twitter, Linked in, Instagram. And watch his videos on YouTube.