What’s Your Type? – Great Typography Tips, Tools and Examples

Typography is an extremely important aspect of web design, surprising then this it is one area which is often overlooked. Getting your font type and size right is critical in communicating your messages and focussing the user’s attention. In this article you will find advice, examples and freebies on all aspects of typography design and use. As always, feel free to leave us a comment if you have any feedback.

Do’s and Don’ts
  • Do make us of line-height to help space your text properly.
  • Do space your letters correctly, particularly in headlines and titles.
  • Do use web safe fonts whenever you can.
  • Do focus your readers eyes on the important content by using proper hierarchy.
  • Do make use of white space to help reduce the strain on your reader’s mince pies.
  • Don’t use too many font types on the same page.
  • Don’t ever use the font comic sans!
  • Don’t use CAPITAL LETTERS AS THOUGH IT IS GOING OUT OF FASHION.
  • Don’t use Sans Serif fonts for large amounts of text. (Difference between Sans-serif and Serif font)
  • Don’t overload the text with bold, underlines and italics.
Typography Tools
  1. CCS Type Set
  2. Type Tester
  3. Type Chart
  4. What The Font
  5. Font Struct 

 

Examples of beautiful web design typography

Chirp

Zee

Carsonified

Glitch

GetFinch

Fajnechlopaki

Amazeelabs

Infivision

Ryanscherf

Benlind

Free Fonts

40+ Excellent Freefonts For Professional Design

11 Fresh High-Quality Free Fonts

15 Excellent Free Font Resources

14 Resources for Free Fonts and Premium Fonts

7 Brand New Free Fonts for Your Designs

50 Best Free Fonts Having Commercial Use License

40 Free Fonts Sites & Resources

8 New Free Fonts for Your Designs

Free Fonts: Excellent List of Resources

Liked this post? Subscribe to our RSS feed and get loads more!

Do you have an opinion, tip or suggestion related to the above post? Then please let us know by leaving a comment below or send us a Tweet @fasthosts and add the hashtag #fhblog.

Be Sociable, Share!

    Leave a Comment

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>