In May 2000, Jacob Nielsen reported about an eyetracking study which confirmed his previous findings that website text attracts users’ attention before graphics.
“Of users’ first three eye-fixations on a page, only 22% were on graphics; 78% were on text . In general, users were first drawn to headlines, article summaries, and captions. They often did not look at the images at all until the second or third visit to a page.”
So, yeah, designers for the web need be highly conscious of typography and make well informed decisions. Thankfully, an abundance of tools exist to help us with designing, managing, and selecting typefaces for our projects and products.
Typewolf
One of my favorite typography indexes is Typewolf, which pursues the latest font pairings used across the web and provides links to test and purchase
Extensis Suitcase Fusion
I was a huge fan Fontcase, the font management product developed by Bohemian Coding (makers of the UI design app Sketch). When they pulled the plug on the product in 2013 I started scrambling for an alternative. Thankfully I found Suitcase Fusion, which does a great job enabling users to collect, tag, and categorize their fonts, and works with TypeKit and Google Fonts!
http://www.extensis.com/font-management/suitcase-fusion/
RightFont
I’ve got a wandering eye… for font managers. So, even though I’m happy with Suitcase Fusion, I’ve noticed this new app that looks similar to my departed Fontcase. I haven’t tried it out yet, but maybe you can take a chance and let me know how it works for you?
http://rightfontapp.com/
Typecast
Browser based tools for text layout are fun and extemely useful, especially when they offer amazing integrations and shortcuts between design and development like Typecast, from Monotype.
WhatTheFont
This tool, while often very hit or miss, has been one of my resources for identifying fonts for at least a decade. When its right, its right… and when it’s wrong, well, I can’t even.
https://www.myfonts.com/WhatTheFont/
Don’t stop there
If my suggestions aren’t enough then check out this incredible, exhaustive, and categorized list of every valuable online typographic resource compiled by Towhid.
1.Learn Typography
•Typeradio – Podcast about typography.
•Professional Web Typography – Practical guide for crafting effective typography on the web.
•The Elements of Typographic Style Applied to the Web
•Butterick’s Practical Typography – A practical guide to web typography.
•Fontology – Useful information about typographic arts.
•A Pocket Guide to Master Every Day’s Typographic Adventures – A project by Benedikt Lehnertfor mastering the daily typography adventures.
•FontShop Glossary – Common type terminology.
•Typography That Works: Typographic Composition and Fonts – Typography course by famous Ellen Lupton.
2. Free Fonts
•Google Fonts – Directory of free, open-source web fonts
•Font Squirrel – Hand-picked, high-quality web fonts
•/r/freefonts – Sub reddit for finding unique fonts
•DaFont – Directory of free downloadable fonts
•1001 Free Fonts – Another web font directory where you can find free fonts
•1001 Fonts – Free fonts directory
•Fontspace – Another directory of free fonts
3. Font Pairing
•Typewolf – Find the perfect font combination
•Font Pair – Perfect Google Font pair
•Font Flame – Tinder for Font pairing
•Type Genius – Select a font and find out what other designers paired it with
•Typ.io – Find out what font goes with what?
•Google Web Fonts Typographic Project – Google fonts set to Aesop’s Fables
4. Test & Preview Fonts
•TypeWonder – Enter your site URL, select a font and instantly preview the results
•Webtype Font Swapper – Test how your website will look with fonts from Webtype
•FontFriend – Drag and drop preview of any custom font directly in your browser
•Flipping Typical – Compare the web fonts
•The Web Font Blender – Playground for finding best font combination
•Font dragr – Test custom fonts in your browser
•Wordmark.it – Choose the right font for the project
•The Web Font Combinator – Test and preview different font combinations
•Font Combinator – Drag, drop re-size fonts until you find the best combination
•Typetester – Compare and test Web fonts from Adobe Edge, Google and Typekit
•Typecast – Test and preview fonts on real content
<
p class=”p3″>
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
•Beautiful Type – Typography inspiration blog by Aurélien Foutoyet & Francis Chouquet
•Good Typography – Find inspiration about typography, calligraphy and lettering.
•Friends of Type – lettering sketchblog by Erik Marinovich, Aaron Carambula, Jason Wong, and Dennis Payongayong.
•I Love Typography – A blog about font & typography
•TypeInspire – Showcase of typography inspiration.
•Typophile – A typographic inspiration gallery.
•NYC Type – Typography found on the streets of New York City.
•Typostrate – Typography & design inspiration blog.
•TypeToy – online graphic archive curated by Aaron Eiland.
•We Love Typography – Handpicked gallery of type-related content.
•Type Everything – Independent platform for promoting talented designers.
•Font In Use – Public archive of typography indexed by typeface, format, and industry.
•Incredible Types – Curated collection of outstanding typography and design.
•Woodtyper – Notes on type, and related matters.
•Palettab – Discovering new fonts whenever you open a chrome tab.
•Beautiful web type – A gallery of the best typefaces from the Google web fonts directory.
•Type Worship – Inspirational typography, lettering, reviews, interviews with designers.
•grain edit – Classic design work from the 1950s-1970s
•The Dieline – Package design inspiration on the web.
•Book Cover Archive – A curated gallery of book cover design.
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
•Modular Scale – Calculator for better typographic decisions.
•Size Calculator– A tool for calculating and visualizing the relationships between viewing distance, physical size, and perceived size.
•Golden Ratio Typography Calculator – Discover the perfect typography for your website.
•PXtoEM – PX to EM conversion.
•Type Scale – A visual type scale calculator.
9. Community
•Typography.guru – Online community around the fields of typography, lettering and calligraphy.
•/r/typography – Subreddit for typography
•/r/lettering – Lettering subreddit.
•TypeDrawers – Forum for typeface design, lettering, and typography.
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.