Jump to content
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Sign in to follow this  
Rss Bot

4 top typography tools for web designers

Recommended Posts

Getting the typography right in your web designs is a vital skill, but one that's difficult to master. These top typography tools for web designers will help you on your way. Here we've included tools to help you find the perfect font pairing and great places to download fonts, but also some handy tools to help you make your font choices work well in situ. 

01. Gridlover

66nMfcMaSNKPUPUEKutfaQ.png

This tools is great for gauging font sizes

Gridlover is awesome at gauging font sizes and spacing on a web page when you’re considering how big your H1 and H2 titles need to be. This free tool enables you to dynamically set scaling rules that apply to your headers and tinker with the CSS.

It’s also a great tool for when you need to hand over designs to a developer. The output CSS and rules are really useful for ensuring consistency between design and code.

02. Canva Font Combinations

wg9njqdH5xD6r23PRkMoKb.png

Pick a starter font and see where it takes you

Canva's Font Combinations is a useful tool if you want to simply see font pairings and get some inspiration. Select your starter font and this tools will provide you with a list of useful ideas of great font pairings. A great advantage is that you can also see the pairing in situ with live examples. Although the font listing is not huge, you can count on every font being web safe and is a great starting point for inspiration.

03. Adobe Typekit

jRAJH8F69sQDmsksc2ohp9.png

Typekit offers an abundance of web-safe fonts

Adobe Typekit is a healthy alternative to Google Fonts, providing you an abundance of choice on web-safe fonts. Create kits for individual projects and navigate through a variety of available fonts. What’s useful about this tool is the ability to rewrite the sample text and filter through typography styles.

With a font chosen it’s really easy to install on a web page using a couple of lines of code in the head of your HTML and CSS.

04. Fonts.com

Mpe2K94Z8HRJq3wXYNoseL.png

This library includes more unique and unusual fonts

A great resource if you want your project to be more individual and unique. Font libraries like Google Fonts and Adobe Typekit are always great, but you can count on your chosen fonts being used by others too. The wonderful thing about Fonts.com is that you can browse through a larger portfolio of fonts and see how they are being used by the font authors. It’s a great inspiration resource, especially for personal and unique fonts.

bXqh6JuHaZqhVKKxPukeQE.jpg

Web design event Generate New York returns on 25-27 April 2018, offering a packed schedule of industry-leading speakers, a full day of workshops and valuable networking opportunities – don’t miss it. Get your Generate ticket now.

This article was originally published in creative web design magazine Web Designer. Buy issue 271 or subscribe

Read more:

View the full article

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×