Type Reference

Typography
Typescale - Create stunning typography, generate CSS, and find inspiration.
G what? The elusive mystery of the letter g explained - TypeRoom
Despite seeing it millions of times in pretty much every picture book, every novel, every newspaper, and every email message, people are essentially unaware of the more common version of the lowercase...
Expert Lists: Fonts for UI/UX design — I Love Typography
How important are fonts in user interface and user experience design? We have the answers and a monster edition of Expert Lists authored by typography expert Johannes López Ayala. Johannes shares 16 font families that he recommends for use in UI/UX design.
Aspect ratio calculator for font-size-adjust
Flawless Typography Checklist
A complete typography master course in the form of an interactive visual checklist.
Letraslut
The Ultimate Guide to Creating a Design System — Part Two, Typography
Learn how to select, setup & edit your typography styles within a design system!
Your Body Text Is Too Small – Medium
Why website body text should be bigger, and ways to optimize it.
Proportio.app
Tool for creating proportional scales for typography, iconography, spacing, and components in design systems.
Making hand drawn fonts with a tablet, Adobe Illustrator and Glyphs Mini
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 ...
TYPE HUNTING
An on-going archive of found typography. Photographed & curated by Jonathan Lawrence.
Design Systems Typography Guide
Learn about choosing typefaces, font weights, styles, sizes, line-heights, and responsive type for your design system.
Text in Figma - Online Documentation
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
5 common mistakes to avoid while creating a typographic scale in 2021
These are 5 mistakes I made and learnt from while creating the typographic scale for the CallHub marketing website.
Line height playground
Getting to the bottom of line height in Figma
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.
5 Keys to Accessible Web Typography
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
Leon Sans is a geometric sans-serif typeface made with code in 2019 by Jongmin Kim.
Type Terms
Type Terms. The animated typographic cheat sheet.
37 Exceptional Font Pairings Trends in 2019
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.
Setting Type for User Interfaces
Use thoughtful typography for accessible user interfaces by looking for font characteristics that support quick comprehension when choosing type for your design.
Typography in Design Systems March 17, 2019 at 5:17 PM
A typographic system that optimizes for guessability.
Get Down to the Nitty-Gritty of Text Rendering in Sketch
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…
8-Point Grid: Typography On The Web
Web typography is confusing. Do you know the best practices?
Typography in Design Systems
Choose Fonts, Set a Hierarchy, and Integrate with Components
4 Simple Steps to Vertical Rhythm Mentions of vertical rhythm and baseline grids seem to elicit eith…
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.
Responsive vertical rhythm
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…
Setting Type on the Web to a Baseline Grid
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…
Compose to a Vertical Rhythm
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.