All caps letter spacing – How to fix it with tracking & kerning
3950 次观看 · 2021-04-20
字体设计
Thanks to all subscribers 🤩 I stepped into the shower for you! 1,000 in less than 6 months 🤯 this blows my mind, you are the best! 🙌 Happy to hear your thoughts and suggestions for future content in the comments!
💌 Pimp my Type Newsletter with weekly font recommendations:
https://pimpmytype.com/newsletter
📰 Corresponding article with images:
https://zeichenschatz.net/typography/tracking-and-kering-all-caps-text
TL;DW: All caps text creates problematic spaces because upper case letters are designed to be set next to lower case letters. Most of it will be evened out by adding some tracking (or letter-spacing in CSS). As a bonus in design tools you can micro-adjust individual character pairs with kerning. This will create a more even typographic color.
This topic is super emotional to me. It was my first typographic epiphany when I was starting out as a student at design school, here I share it with you and:
👉 What’s the problem with the letter spacing of all caps text
👉 What’s the difference between tracking and kerning
👉 How to fix the spacing of upper case text
👉 When and how to space mixed case text
Key takeaways for spacing upper case text:
👉 In typography, you aim for an even typographic color, which means avoid to dark and too light spots.
👉 The default spacing for capital letters in most fonts are made to fit next to lower case letters.
👉 Adding some tracking (letter space) it will improve it for the most part
👉 Micro-adjust the spacing it in your design tool by kerning individual character pairs
👉 Light typefaces need more tracking, bold typeface need less
Key takeaways for spacing mixed case text:
👎 Don’t letter space mixed case body text in 14 to 24 px sizes. It will make the word shapes fall apart.
👍 Reduce tracking for large display text above ~24 px
👍 Increase the tracking for small print, small UI text or captions below ~14 px
Chapters
00:00 Intro in the shower
01:54 The problem with all caps text
02:40 Tracking and kerning
04:01 How to fix the spacing
05:26 When is it too little or too much?
05:59 It depends on the typeface
07:03 Spacing lower case text
08:24 Fixing the subscribe button
08:48 Summary & Outro
09:29 Outtakes
Sound from freesound.org:
Dramatic strings cinematic by tabotabon
Horror movie strings by timbre
💌 Pimp my Type Newsletter with weekly font recommendations:
https://pimpmytype.com/newsletter
📰 Corresponding article with images:
https://zeichenschatz.net/typography/tracking-and-kering-all-caps-text
TL;DW: All caps text creates problematic spaces because upper case letters are designed to be set next to lower case letters. Most of it will be evened out by adding some tracking (or letter-spacing in CSS). As a bonus in design tools you can micro-adjust individual character pairs with kerning. This will create a more even typographic color.
This topic is super emotional to me. It was my first typographic epiphany when I was starting out as a student at design school, here I share it with you and:
👉 What’s the problem with the letter spacing of all caps text
👉 What’s the difference between tracking and kerning
👉 How to fix the spacing of upper case text
👉 When and how to space mixed case text
Key takeaways for spacing upper case text:
👉 In typography, you aim for an even typographic color, which means avoid to dark and too light spots.
👉 The default spacing for capital letters in most fonts are made to fit next to lower case letters.
👉 Adding some tracking (letter space) it will improve it for the most part
👉 Micro-adjust the spacing it in your design tool by kerning individual character pairs
👉 Light typefaces need more tracking, bold typeface need less
Key takeaways for spacing mixed case text:
👎 Don’t letter space mixed case body text in 14 to 24 px sizes. It will make the word shapes fall apart.
👍 Reduce tracking for large display text above ~24 px
👍 Increase the tracking for small print, small UI text or captions below ~14 px
Chapters
00:00 Intro in the shower
01:54 The problem with all caps text
02:40 Tracking and kerning
04:01 How to fix the spacing
05:26 When is it too little or too much?
05:59 It depends on the typeface
07:03 Spacing lower case text
08:24 Fixing the subscribe button
08:48 Summary & Outro
09:29 Outtakes
Sound from freesound.org:
Dramatic strings cinematic by tabotabon
Horror movie strings by timbre