Typeface selection plays a critical role in the readability of your content. Although it may be one of the overlooked aspects when it comes to designing websites. One of the main finding of Nielsen Norman Group Eye-tracking Study of Web Readers was “Text Attracts Attention Before Graphics”. The study revealed,

“Of users’ first three eye-fixations on a page, only 22% were on graphics; 78% were on text”.

As a web designer, you need to pay more attention to typography.To make your design more effective and impactful we have compiled a huge list of typography tools and resources available on the Internet. If you are serious about web design and want to improve your skills, Take time to work your way through this resources.

 

1.Learn Typography

 

2. Free Fonts


3. Font Pairing


4. Test & Preview Fonts


5. jQuery Library

  • Lettering.js – jQuery plugin to control the CSS style of each letter from a word.
  • FitText – makes font-sizes flexible that fill the width of a parent element.
  • SlabText – Create big, bold, responsive headlines.
  • BigText – Match a line of text to a specific width.
  • Type Rendering Mix – Control text rasterizer and anti aliasing your browser is using.
  • Kerning.js – Get full control over web typography.
  • Dropcap.js – Beautiful drop caps.
  • Lining.js – Not just ::first-line, add ::nth-line() to your arsenal.
  • Underline.js – Perfect and playful text underline.
  • FlowType.js – Change the font-size based on a specific element’s width.
  • Hatchshow – Typesetting plugin for balancing measures
  • CircleType.js – Plugin that lets you curve type.
  • Font-To-Width FTW – Fits text to the width of an element.

 

6. Typography Inspiration

 

7. Identify Fonts

  • WhatFont – Find out the fonts used in a webpage.
  • What Font is – Upload image and identify the font.
  • WhatTheFont! – Upload image to find the closest font.
  • Fount – Identify any font along with size & weight.
  • The Font Matcherator – Upload a screenshot of the type to find the name of the font.
  • Type Sample – Chrome extension for identifying and sampling fonts.
  • Identifont – Find fonts by name, similarity, image and designer/publisher.
  • Fontface Ninja – Browser extension for identifying the name of any font.
  • Font Spotting – Subreddit for spotting fonts.

 

8. Calculate

 

9. Community

 

10. Frameworks

  • typebase.css – Minimal, customizable typography stylesheet.
  • yue.css – typography stylesheet designed for article content.
  • Typeplate – Proper markup with extensible styling for common typographic patterns.
  • Baseline – A designer framework built with typographic standards in mind.
  • Gutenberg – Web typography starter kit.
  • Gridlover – Typographic system with modular scale & vertical rhythm.

 

11. Miscellaneous

  • FontReach – Rank the font usage of top million sites on the web.
  • Tiff – A visual typeface diff tool.
  • FontBase – A free font manager for designers.
  • Get the Font – Simple tool to search & download any font.
  • FFFFALLBACK – easily find the perfect fallback fonts.
  • Typographica – Review of typefaces and type books,
  • Type Connection – Typographic dating game teaches designers how to pair typefaces.
  • Typedia – Encyclopedia of typefaces.
  • Nice Web Type – Resources for web typography, handcrafted by Tim Brown, Type Manager for Adobe Typekit.
  • fontfamily.io – Compatibility tables for default local fonts.

Have we left out any typography tool and resource? If, please let us know in the comment below.

Towhid
Towhid
Towhid is a Web developer & HubSpot certified Inbound Marketer. Co-founder of WPD and CMO at Optimizer WP. Love all things Football and very interested in how WordPress will change the industry.

Build Amazing WordPress Websites for Free Without Any Technical Knowledge

Check out our Extremely customizable WordPress Theme Optimizer that lets you create beautiful websites for free without touching any code. Trusted by over 70k websites.

Examples Download Now

2 Responses

  • Wow Towhid! You really put a great list of resources together. These web font resources are all useful and I appreciate you taking the time to put them together. Well done! I’d heard of Baseline, but the others you listed I’ll have to check out. Thanks!

  • Hi Towhid, Great list! I’ve used it several times as a reference for a guide I’m currently working on.
    Would you consider adding it to your list?
    http://anartfulscience.com/Typography-First.php

    All the best, Stephen

Your Response

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

347 Shares
Share104
Tweet176
+123
Share44

Get Free Resources to Grow Your Business

Subscribe!