Photo by mali maeder from Pexels.

Typography is a deep and complex area of design. Ubiquitous and ever-present in the world of visual communication, it’s an art that takes years to truly master. But it’s also a discipline that never stops growing.

With more fonts being created every day, and ever-expanding ways to implement and use them, it can be difficult to remain on the cutting-edge of the field. And this is why even the most veteran designers can benefit from using online typography tools to help streamline their workload.

There are many different sites and services out there, offering all sorts of tricks and instruments. But for the sake of simplicity, we’ve chosen to share three that we think are particularly helpful. They cover what we consider the basics: pairing, identifying, and expression. We hope you’ll find them useful.

Note: the links in this article aren’t affiliated, and we have no connection to the companies listed below. 

Fonts Ninja

Fonts Ninja is an excellent typographical resource. It’s an impressive multi-feature tool, allowing users to try fonts in any design software before buying. But one aspect of this service that really stands out for us is the browser extension, which allows you to identify a font on a website by simply clicking on it.


For designers interested in the psychology of typography, this is a really fantastic service. In a nutshell, Emotypes groups typefaces by emotion. It offers a small but specially-curated selection under the following headings: confident, welcoming, unique, neutral.

At the time of writing, each category features three fonts. So there’s not a huge selection, but it’s fantastic as a quick go-to resource. And it’s even more effective when combined with the principles of the psychology of colour.


Archetype is an extremely useful tool for matching visually-compatible typefaces. It’s especially useful for web designers looking to create great looking sites with consistent typography.

In the company’s own words: “Archetype lets designers like you very quickly and easily create consistent typography styling and spacing live, in the browser. These styles are all underpinned by established typographic best practices meaning less guesswork and more harmonious designs.”

To get a better idea of what it’s all about, we’d recommend heading over to the site and having a play around!

Typography: the basics

We hope you’ll find the above resources useful and interesting. And for more on typography – specifically an overview of the subject in general – why not read our post Design Fundamentals: Understanding Typography.