Tech is political: The people under attack in Palestine 🇵🇸, Iran 🇮🇷, and Lebanon 🇱🇧 are people like us. They’re our brothers and sisters, too. Read up on their history, scrutinize what you’re told, and demand respect, accountability, and support. Hide

dxsrc

“fonts” News Archive

Definition, related topics, tag feed

Definition · Supertopics: typography · Subtopics: flash-of-x, icon-fonts, kerning, ttf, variable-fonts, woff (non-exhaustive) · “fonts” × ? · “fonts” RSS feed (per email)

Entry (Sources) and Additional TopicsDate#
This Weird 1973 Typeface Just Came Back From the Dead (web)239
Keeping Type Consistent in Changing Conditions (ell)238
typography, variable-fonts
Reminder That “system-ui” Is Well Supported, When You Use It on macOS You Get San Francisco Which Is a Variable Font, Which Is Fun, and the Fallbacks Are Pretty Good (chr/fro)237
css, macos
Lessons Learned Making My Peritel Typeface (chr)236
lessons
WOFF 1.0: A Milestone on W3C’s Journey of Fonts on the Web (svg/w3c)235
woff, standards, web, w3c
Decoy Font234
ttf, ai
FIFA’s World Cup Typography Foul: UI Design Learnings (pim)233
typography, legibility
Why AI Won’t Replace Human Type Designers232
ai, typography, design, career
Font Licensing Is About to Change231
licensing, ai
“font-family” Doesn’t Fall Back the Way You Think (css)230
css, flash-of-x
Testing Font Scaling for Accessibility With Figma Variables (sma)229
accessibility, scaling, figma, variables
A Broken Heart (api)228
performance, emoji
How to Use Font Ligatures227
how-tos, typography, tooling, adobe, figma, microsoft, css
Fonts (htt)226
web-almanac, studies, research, metrics, performance, css
Accessibility Is a Human Right, Cruelty a Human Wrong (zel)225
accessibility
Using CSS to Fix the Irradiation Illusion (arg)224
css, readability
Monotype Font Licencing Shake-Down (ame)223
licensing
Dear Designers: Stop Using System Fonts Like It’s 2005 (web)222
design, variable-fonts
Targeting Specific Characters With CSS Rules (ede)221
css, unicode
Design Can’t Rely on Logic: Troy Leinster on Type Design and Human Perception (int)220
podcasts, interviews, design, typography
Should You Preload Fonts for Performance? (erw)219
performance, preloading
You’re Loading Fonts Wrong (and It’s Crippling Your Performance) (jon)218
performance, css, image-replacement, flash-of-x, history
The Good, the Bad, and the Unreadable (mal)217
readability, legibility, accessibility, wcag
It’s More Than Picking a Pretty Font216
accessibility, legibility, readability, typography, wcag
Why Fonts Look Better on macOS Than on Windows215
typography, readability, macos, windows, comparisons
Thin Fonts Are a Usability Nightmare—and Finally, Designers Are Waking Up (web)214
typography, usability, accessibility, design
Revisiting Fluid Type (ric+/odd)213
videos, interviews, typography, responsive-design
The Hardest Working Font in Manhattan (mwi)212
typography, history
How to Improve Webpage Speed: Tips and Best Practices211
how-tos, performance, optimization, tips-and-tricks, best-practices, redirecting, images, testing, tooling, webpagetest
One Year of Using the Web With Web Fonts Disabled210
accessibility, readability
Beware the Faux Bold (and How to Fix It) (ric)209
typography, css
Preload Fonts on Your Website for Better Core Web Vitals (deb)208
performance, preloading, hints, web-vitals
Fast and Smooth Third-Party Web Fonts (sco)207
embed-code, performance, css, javascript
Fabulous Font-Face Fallbacks (sto/per)206
performance, css, typography
Preloading Fonts for Web Performance With “link rel=preload” (acc/mat)205
performance, preloading, html, hints
Fonts (bra/htt)204
web-almanac, studies, research, metrics
What Makes a Font Accessible? A Designer’s Guide (a11)203
guides, design, typography, accessibility
Features of Your Font You Had No Idea About (ole)202
variable-fonts, css
Quick Guide to Web Typography for Developers (ole)201
guides, typography, examples
The Ultimate Guide to Font Performance Optimization (deb)200
guides, performance, optimization
The Monospace Web199
design
WOFF File Format 2.0 (w3c)198
woff, standards
State of Text Rendering 2024197
rendering
Beyond Monospace: The Search for the Perfect Coding Font (rom+/evi)196
developer-experience
Going Beyond Pixels and (r)ems in CSS—Relative Length Units Based on Font (uti/iod)195
css, units
Animating Font Palette (man)194
css, colors, effects
Installing Google Fonts as npm Packages (ami)193
installing, tooling, dependencies, google
The Most Accessible Font192
accessibility, typography, legibility
How to Use a Color Font (man)191
how-tos, css
The 3 Secrets to Font Pairing190
typography, design
Optimizing Web Fonts189
css, performance, optimization
WOFF Has Left the Building (mat)188
woff, typography, css, support
The New Google Fonts: Find What You’re Looking For (tob)187
google
Thinking on Ways to Solve Adaptive Typography (arg)186
videos, typography, css
Using Emoji on the Web (oll)185
emoji, support, unicode
The New “@font-face” Syntax (oll)184
css
What’s Your Type? Try These Tests to Pick the Perfect Font for You (was)183
design, typography
Typography for Everyone (tob/btc)182
videos, typography
How to Use Google Fonts and “font-display”181
how-tos, google, css
Modern Font Stacks180
websites, typography
16 Little UI Design Tips That Make a Big Impact179
design, tips-and-tricks, spacing, consistency, colors, contrast, typography
Handling CSS Color Fonts With “font-palette” (sta)178
css, colors
Managing Fonts in WordPress Block Themes (css)177
wordpress, theming
How to Password-Protect a Static HTML Page With No JS (ede)176
how-tos, security, css
Improved Font Fallbacks175
typography, graceful-degradation
How to Pick a Font (That Doesn’t Suck)174
how-tos, guides, typography
Quick Thoughts on Typeface and Font Accessibility173
accessibility, typography
From Type to Logotype172
typography, design, branding, logos
The Final Google Fonts Knowledge Drop of 2022 (ell)171
google, typography
Advanced Web Font Optimization Techniques170
typography, optimization
Hands-On Guide to Color Fonts and “@font-palette-values” (zor/css)169
videos, guides, css
This Site’s Type Is Now Variable (ell)168
typography, variable-fonts, css
Fonts (htt)167
web-almanac, studies, research, metrics
First Batch of Color Fonts Arrives on Google Fonts166
google, typography, colors
Which Fonts to Use for Your Charts and Tables (lis/dat)165
information-design, tables
Front-End Internationalisation Tips (stu)164
internationalization, css, javascript
The Joy of Variable Fonts: Getting Started on the Frontend (rom+/evi)163
variable-fonts, css, introductions
Do Dyslexia Fonts Improve Accessibility?162
accessibility, dyslexia
Measuring the Performance of Typefaces for Users II (sma)161
typography, performance
Measuring the Performance of Typefaces for Users (sma)160
typography, performance
Customizing Color Fonts on the Web (djr/web)159
colors, customization
Best Font for Online Reading: No Single Answer (nng)158
studies, research, typography, readability
Fonts for the Web: Rationale, 1996 (svg/w3c)157
history
Childish Font Sizes (tyl/clo)156
readability, design
Fonts in Use: Variable Fonts155
typography, variable-fonts
Variable Fonts in Real Life: How to Use and Love Them (rom+/evi)154
variable-fonts, typography
Identifying Fonts: The Complete Guide153
guides, typography
Don’t Believe the Type! (gar+/deq)152
videos, accessibility, typography, readability
Minimizing Google Fonts by Only Loading It for Certain Characters (ami)151
typography, google, performance, minimalism
Why You Should Use a Developer Font150
typography, productivity
How to Avoid Layout Shifts Caused by Web Fonts (sim)149
how-tos, performance, user-experience
Google Fonts Knowledge (ell)148
google, typography
What Are Accessible Fonts?147
accessibility
What Creating a Simple Font Taught Me About Font Design146
typography
Firefox’s “bolder” Default Is a Problem for Variable Fonts (sim/css)145
css, variable-fonts, browsers, firefox
Avoiding FOUT With Async CSS (jay)144
flash-of-x, css, asynchrony
Times New Roman Doesn’t Have to Be Boring—Here’s Why143
typography
All You Need Is 5 Fonts142
design, typography
Optical Size, the Hidden Superpower of Variable Fonts (pix)141
css, variable-fonts, typography
Best Practices for Fonts (tun)140
best-practices, performance
Uniwidth Typefaces for Interface Design139
typography
Why You Should Self-Host Google Fonts in 2021138
google, self-hosting
Time to Say Goodbye to Google Fonts: Cache Performance137
google, caching, performance
Leveraging System Fonts on the Web (jim)136
The Monospaced System UI CSS Font Stack135
css, link-lists
Use Advanced Typography With Local Fonts (tom)134
typography, apis
Happy Birthday Web Fonts! (w3c)133
anniversaries, woff, standards
Speed Up Google Fonts (css)132
performance, google
Dark Mode and Variable Fonts (fon/css)131
dark-mode, variable-fonts, css
Improving Perceived Performance With the CSS “font-display” Property (the)130
performance, css
Should You Self-Host Google Fonts? (tun)129
google, self-hosting, performance
How to Convert Variable TTF Font Files to WOFF2 (hen)128
how-tos, variable-fonts, ttf, woff, typography, conversion
Interactivity and Animation With Variable Fonts (man/24w)127
variable-fonts, animations, javascript, css
Dynamic Typography With Variable Fonts (btc)126
videos, typography, variable-fonts
Optimizing Google Fonts Performance (sma)125
google, performance, optimization
The Scoville Scale of Web Font Loading Opinions (zac/btc)124
videos, performance
Google Fonts Is Adding “font-display” (zac)123
google, css
The Serif Tax (chr/css)122
performance, ttf
Typography for Developers (css)121
typography, legibility, readability, css, link-lists
Get All Font Sizes in Use on a Web Page (zac)120
css, console, javascript
CSS Fonts 3 Is a W3C Recommendation (svg/w3c)119
css, standards
Variable Fonts: What They Are, and How to Use Them118
how-tos, variable-fonts, performance
Icon Fonts vs. SVGs—Which One Should You Use in 2018?117
icon-fonts, svg, images
Weird Things Variable Fonts Can Do (chr/css)116
variable-fonts
Three Techniques for Performant Custom Font Usage (oll/css)115
performance, techniques, flash-of-x
Web Fonts Working Group Announces WOFF 2.0 File Format114
w3c, woff, standards
Understanding Web Fonts and Getting the Most Out of Them (thi/css)113
ttf, woff, css, typography, variable-fonts
Introduction to Variable Fonts on the Web (dav+)112
introductions, variable-fonts, css
FOIT vs. FOUT, a Side by Side Comparison (zac)111
user-experience, flash-of-x, comparisons
Using Webfonts (ali)110
css
CSS “font-display”: The Future of Font Rendering on the Web109
css, typography
If You Really Dislike FOUT, “font-display: optional” Might Be Your Jam (chr/css)108
flash-of-x, css
Optimizing Web Fonts for Performance: The State of the Art107
performance, optimization
Get Started With Variable Fonts (ric)106
introductions, variable-fonts
Free Fonts With Personality and Style (sma)105
link-lists
Align SVG Icons to Text and Say Goodbye to Font Icons (pro)104
svg, images, icons, icon-fonts, css, design, alignment
Experimenting With Color Fonts (fon/css)103
colors, experiments
Webfonts on the Prairie (ali)102
metrics
Critical Web Fonts (zac)101
css, flash-of-x, critical-path, performance, metrics
A New Responsive Font Format for the Web (fon/css)100
variable-fonts, responsive-design
Seriously, Don’t Use Icon Fonts (tyl/clo)99
icon-fonts, html, quality
Loading Web Fonts With the Web Font Loader (fon/css)98
flash-of-x, performance, user-experience
4 Expert Tips for Getting the Most Out of Google Fonts97
google, tips-and-tricks
Using Web Fonts the Best Way (in 2015) (hel)96
performance
Type Is Visible Language (esp/btc)95
videos, typography
The Mitt Romney Web Font Problem (zac)94
flash-of-x, user-experience, css, javascript
Monotype Is Introducing an HTML5-Based Web Font Platform93
html
Variable Fonts for Responsive Design (nic/ali)92
variable-fonts, responsive-design
Flash of Faux Text—Still More on Font Loading (zac)91
flash-of-x, ttf, woff, css, javascript
Programming Fonts90
websites, programming, comparisons
The Good, the Bad, and the Great Examples of Web Typography (sma)89
typography, examples
3 Principles for Perfect Typeface Pairing88
typography, principles
Minimising Font Downloads (jaf)87
css, performance, optimization, support, browsers
The Latest in Web Font Trends (ali)86
trends
Thought Process of a Front End Problem (chr/css)85
processes, debugging, opera, browsers
What Are Icon Fonts?84
icon-fonts
Preventing the Performance Hit From Custom Fonts (chr/css)83
performance, ajax, jquery, lazy-loading
Font Hinting and the Future of Responsive Typography (nic/ali)82
typography, responsive-design
A Critical Approach to Typefaces (sma)81
typography
5 Use Cases for Icon Fonts (css)80
icon-fonts, examples, css
WOFF File Format 1.0 (typ+/w3c)79
woff, standards
Why Won’t Helvetica Go Away? (sma)78
typography, history
HTML for Icon Font Usage (chr/css)77
html, icon-fonts, semantics
A Closer Look at Font Rendering (sma)76
rendering, typography
Custom Fonts in Emails (chr/css)75
email
Creating Custom Font Stacks With “unicode-range” (dre/24w)74
css, unicode
The “@font-face” Rule and Useful Web Font Tricks (ope/sma)73
css, tips-and-tricks
Converting “@font-face” Fonts Quickly in Any OS (zol)72
conversion, css
A Solution to Stop Font Face Fonts Looking Bold on Mac Browsers71
css, browsers, apple, unix-like
The Future of Web Fonts Is Sooner Than It Used to Be70
woff, design
Web Could Be Stylized by New W3C Font Platform69
web, woff, w3c
Quick Guide to Implement Webfonts via “@font-face” (pau)68
guides, css
Frontend SPOF67
performance, html, javascript, css
Google Fonts Is Born—Can I Get a Hallelujah!? (mis)66
google, typography
2010: Web Fonts Are Here and Ready to Use (bra/aja)65
google, foss
How to Detect Font-Smoothing Using JavaScript (zol)64
how-tos, javascript
On Web Typography (jas/ali)63
typography, legibility, readability
Web Open Font Format for Firefox 3.6 (moz)62
woff, firefox, browsers
“@font-face” Is Cool… but Does It Scale? (oct/aja)61
css, performance
More “@font-face” Fun (zol)60
css
Can Typekit Bring Fonts to the Web?59
typography
“@font-face” in Depth (zol)58
css
IKEA and the Font Fiasco57
typography, case-studies
Friends Don’t Let Friends Use Comic Sans56
design
Font Embedding Now (dav)55
css
Web Fonts: Do Something Positive! (sen)54
Fuck the Foundries (div)53
typography
8 Definitive Web Font Stacks52
typography
Efficiently Serving Custom Web Fonts (wes)51
conditional-comments, apache, internet-explorer, browsers
Font MIME Types (ann)50
mime-types
The Coming Battle Over Web Fonts49
Web Typography: Tell Me What You Want (jas)48
w3c, typography, css
Which Are More Legible: Serif or Sans Serif Typefaces? (ale)47
legibility, typography, studies, research
Increase Your Font Stacks With Font Matrix46
css, concepts
The Principles of Beautiful Typography (jas)45
principles, typography, readability, legibility
The Resurrection of Downloadable Web Fonts44
css
Fonts in Your Face (jon)43
css, safari, opera
Interview With Håkon Wium Lie (pet)42
interviews, css, licensing
Font Rendering Differences: Firefox vs. IE vs. Safari (chr/css)41
css, rendering, firefox, internet-explorer, safari, browsers, comparisons
CSS @ Ten: The Next Big Thing (ali)40
css, anniversaries, standards
80 Beautiful Typefaces for Professional Design (sma)39
design
Inherit Expression for IE? (mey)38
internet-explorer, browsers, css, resets
JavaScript/CSS Font Detector (dal/aja)37
javascript, css, tooling
Better Font Management (dig)36
tooling, link-lists
Problems With Font Rendering on Macs (ric)35
rendering, unix-like, apple, ttf
Safari Better Than Firefox? (zel)34
safari, firefox, browsers, comparisons
More About Web Fonts: Basics and a Few Surprises33
fundamentals, css
Best Fonts for the Web32
Great Fonts for Web 2.031
web-2.0
The Unfortunate Death of Helvetica30
Study of Free/Shareware Web Fonts29
studies, research
Top 5 Web Design Mistakes (nza)28
design, images, javascript, colors, mistakes
Debunking Myths About ClearType Fonts27
myths
sJIR: scalable Jens Image Replacement26
image-replacement, techniques, javascript
The New Typography (ric)25
typography, css
Font Size: No Happy Medium (dav)24
css, units, legibility
A Comparison of Two Computer Fonts: Serif Versus Ornate Sans Serif23
typography, readability, legibility, comparisons
Care With Font Size (w3c)22
css, units, legibility
Understanding Web Typography—an Introduction21
introductions, typography, html
Origins of Verdana/Tahoma (dav)20
typography
Code Style Font Sampler19
css
Fonts—Web-Friendly and Free18
microsoft
Use Relative Font Sizes17
units
A Comparison of Popular Online Fonts: Which Size and Type Is Best?16
legibility, comparisons, studies, research
About the Hiragino Fonts With CSS (hsi)15
unix-like, css
Usability 101: Using Relative Font Sizes14
introductions, units, css, usability, accessibility
Icon Font, SVG, PDF, and PNG Generator13
tools, exploration, images, code-generation, icon-fonts, svg, pdf, png
Font Capability Checker (pix)12
tools, exploration, typography
Font Comparer11
tools, exploration, typography, comparisons
Font Determiner10
tools, exploration, typography
Font Family Support Checker (zac)9
tools, exploration, typography, support
Font Pairing Generator8
tools, exploration, typography, comparisons
Font Style Matcher7
tools, exploration, typography, css
Font Tester6
tools, exploration, typography
Web Font Generator5
tools, exploration, typography
Google Web Fonts Helper4
tools, exploration, code-generation, google, typography
Fallback Font Generator (scr)3
tools, exploration, typography, code-generation
Text-to-Unicode Range Generator (sto)2
tools, exploration, typography, code-generation, css
Font License Checker1
tools, exploration, typography, licensing