Typography is one of the most vital parts of web design. It involves a proper selection of typefaces, line height, spacing, point size and more. The proper combination of color, composition of type and transformation ensures effective and breathtaking design.
Dealing with typography on the web is quite freakish, because each browser has their own methods to render fonts which could lead to unexpected deviations. The good news is there are lots of resources that you can use to make your design more attractive, eye-catching and full of impact. The list includes typography tools, frameworks, libraries and other helpful resources, both free and paid. We hope you’ll find the list handy.
Though you can create a dropcap with present CSS standards, the outcome is not always perfect. DropcapJS is developed by Adobe Web Platform to allow web designers to apply ultimate dropcap easily.
30. Typography Cheatsheet
This is a comprehensive guide that shows how to use proper typographic characters, including correct grammatical usage. Here you’ll learn about apostrophes, dashes, hyphens, accented and non-English characters.
WhatFont is the easiest way to find out the fonts used on any webpage, within a click. The tool detects the service used for serving the font. It comes in the form of Bookmarklet, Chrome extension and Safari extension.
Gridlover is a typography system with modular scale and vertical rhythm. It allows you to adjust CSS for font size, margins and line heights. All the elements are kept aligned to a pixel perfect grid line and the line heights are fitted to the font size.
27. I Love Typography
I Love Typography is an online blog that aims to bring the study of typography to the masses. It covers all type news, latest fonts, reviews, showcases of typographic design and related subjects. The blog is really interesting for those who are interested in crafting their own typefaces.
25. Beautiful Type
Beautiful Type is a blog (started in 2010 by 2 web designers) that showcases incredible typography illustration, extraordinary design, type related books and inspiring videos from all around the web.
24. Incredible Types
Yet another showcase of outstanding typography and design from all around the world. The site has more than 400 pieces on inspiration design from over 430 creative and studios.
Adobe Typekit brings thousands of fonts into one library for quick browsing. You can use these on websites, applications, and countless typography inspiration.
22. Modular Scale
21. Flipping Typical
Flipping Typical is a way to explore the popular typefaces. Just enter a piece of text and it will be displayed in various formats on a single webpage, making it easy to compare different typefaces.
20. Font Picker
FFFFallback is a simple tool for bulletproof web typography that allows you to find the perfect fallback fonts, so that your designs degrade gracefully. It comes in the form of a bookmarklet, which will scan the CSS of the page and suggest a set of fonts to use a fallback.
PXtoEM is a simple web tool that shows matrix for em, pixel, percentage and point units based on body font size. There is a custom calculator where you can convert pixel to em or em to pixel.
TypeWonder is used for testing a website with different fonts in real-time. It’s super easy to use; just enter the URL of the webpage and select the font from the list and the webpage will be displayed with the font you chose.
15. The Elements of Typographic Style (Book)
This is beautifully designed guide for everyone interested in extensive text, design of books and the history of type. The author (Robert Bringhurst) looks at typography functionally and philosophically, knowing well how each perspective intertwines in type.
FontStruct is a free font-building tool that allows you to make fonts out of geometrical shapes, which are arranged in grid pattern. Once you are done creating, the tool generates ready-to-use, high-quality TrueType fonts.
Typeplate is a complete starter kit that includes a handful of basic typographic styles addressing colors, scale, dropcap, hyphenation, code block, indenting, blockquote, word-wrap and more.
Fontli is a “social network for typoholics” that allows you to upload photos of typefaces and browse other images to gain inspiration for your own original typefaces.
Birdfont is a free font editor tool to create vector graphics and export SVG, TTF and EOT fonts. It features object rotating, curve orientation, kerning strings, contextual ligature substitution and more.
An online tool to turn your handwriting into your very own font. It allows you to create fonts with more than 200 characters and even include your signature. This will cost you around $10.
9. Kern Type
This is kind of typography game or you can say a teaching tool that trains your eye to look for the kerning errors and discrepancies. The objective is to position the letters on the correct place so that the word is perfectly kerned.
Lettering is a jQuery plugin for radical web typography. It allows you to target specific character and line within an element by wrapping it in span. Though it should not be applied to every element, you can use it for extra control.
7. Type Rendering Mix
Type Rendering Mix (library) detects browser’s textrasterizer and antialiasing method and then adds 2 classes to HTML element. The first class describes the text rasterizer and the other tells the antialiasing method it is using.
PicLab allows you to add beautiful typography and artwork to your photos. It offers a lot of fonts with full control over size, positioning, color, rotation and opacity. You can also add multiple text layer and drop shadows to your text.
5. Font Pair
Google font is currently the most popular web font library with over 600 font families, used in millions of websites. Font Pair helps designers to pair Google Fonts to make the overall web-design look good. Here you can find a big collection of a various combination between font families and type faces.
Glyphr is free font design software that comes with a big bucket of components, design and editing tools. This HTML based font editor allows you to build complex shapes, copy and paste, flip around or lock them down, drag and resize to your heart’s content. You can edit path with cubic Bezier curves and make changes to the linked shapes. Just create the shape once (like ‘o’) and you can reuse it across many characters (like ‘pqbd’).
FontDoctor is not only capable of comparing and managing fonts, it can also locate, diagnose and repair corrupt and malformed font files, generating a detailed report about bad fonts. The application is available for both Mac and Windows and it’ll cost you around $70.
FlowType is responsive web typography that dynamically adjusts font size based on a specific wrapper width. All you need to do is just set a maximum and minimum width threshold. You can even alter the font size, font ratio and apply a fixed number of characters per line at any screen width.
Typecast is a platform where you can quickly style type in the browser and check readability and rendering as you work. It is packed with over 23,000 web fonts and you can edit CSS and compare fonts side by side. It also offers you the facility to download HTML/CSS file or generate a transparent PNG of the project you are creating.