Typography

Learn how to select, setup & edit your typography styles within a design system!

Why website body text should be bigger, and ways to optimize it.

Tool for creating proportional scales for typography, iconography, spacing, and components in design systems.

This video explains my process for making hand drawn fonts using my Wacom Bamboo tablet, Adobe Illustrator CS6 and Glyphs Mini. This was done on my Mac Mini ...

An on-going archive of found typography. Photographed & curated by Jonathan Lawrence.

Learn about choosing typefaces, font weights, styles, sizes, line-heights, and responsive type for your design system.

Text is a crucial aspect of interface design. Everything from the placement to font choice, has a part to play. Text properties allows you to control

These are 5 mistakes I made and learnt from while creating the typographic scale for the CallHub marketing website.

We’re altering the way we handle text in Figma. Join me on the journey we took to get there — through type history and into the modern times.

I wrote about fluid web typography in last month’s blog post and I realised that a lot of the popular implementation techniques come with accessibility issues. So I wanted to go back and revisit the basics and the best practices of accessible web typography.

Leon Sans is a geometric sans-serif typeface made with code in 2019 by Jongmin Kim.

Type Terms. The animated typographic cheat sheet.

You must be updated with the latest trends in typography if you want amazing branding and designs. Check out popular font pairings that work well together.

Use thoughtful typography for accessible user interfaces by looking for font characteristics that support quick comprehension when choosing type for your design.

A typographic system that optimizes for guessability.

Have you ever worked with text layers in Sketch and didn’t understand what was going on? I know I have. Out of frustration I decided to do…

Web typography is confusing. Do you know the best practices?

Choose Fonts, Set a Hierarchy, and Integrate with Components

Typecast is a free design tool for prototyping web type, web pages & RWD. Create visual & semantic designs. Check for readability & rendering. Hand over CSS & HTML.

I wrote a fairly lengthy post previously on vertical rhythm. I considered adding a section on how to adjust font sizes whilst maintaining vertical rhythm. However, with the experience of seeing how…

As web designers, we sometimes may feel we’re on a relentless journey to bridge the gap between digital and traditional processes. Wilson Miner brings us one step closer by offering up a way to work w…

Richard Rutter scrutinises the typographical proportions and spacing that gives a written page its rhythm. Help your page sing like the herald angels, and still have time for a mince pie and brandy.

Horizontal rhythm mostly impacts the legibility, while vertical rhythm impacts the readability of the text and establishes a sense of visual hierarchy.

An accessible online course that covers the foundations of latin type design.

Free fonts, free alternatives to premium fonts, done-for-you-research articles. Open startup.

Type design must consider not only the shape of the letters, but also the white space around them, which is essential for the ease of reading.

We’re introducing TextStyleBrush, an AI model that can copy the style of text in a photo using just a single word so you can edit and replace text in images.