Targeting Specific Characters With CSS Rules (ede) | | 183 |
css, unicode |
Design Can’t Rely on Logic: Troy Leinster on Type Design and Human Perception (int) | | 182 |
podcasts, interviews, design, typography |
Should You Preload Fonts for Performance? (erw) | | 181 |
performance, preloading |
You’re Loading Fonts Wrong (and It’s Crippling Your Performance) (jon) | | 180 |
performance, css, image-replacement, flash-of-x, history |
The Good, the Bad, and the Unreadable (mal) | | 179 |
readability, legibility, accessibility, wcag |
It’s More Than Picking a Pretty Font (uxd) | | 178 |
accessibility, legibility, readability, typography, wcag |
Why Fonts Look Better on macOS Than on Windows (uxd) | | 177 |
typography, readability, unix-like, apple, windows, microsoft, comparisons |
Thin Fonts Are a Usability Nightmare—and Finally, Designers Are Waking Up (web) | | 176 |
typography, usability, accessibility, design |
Revisiting Fluid Type (ric+/odd) | | 175 |
videos, interviews, typography, responsive-design |
The Hardest Working Font in Manhattan (mwi) | | 174 |
typography, history |
How to Improve Webpage Speed: Tips and Best Practices | | 173 |
how-tos, performance, optimization, tips-and-tricks, best-practices, redirecting, images, testing, tooling, webpagetest |
Preload Fonts on Your Website for Better Core Web Vitals (deb) | | 172 |
performance, preloading, hints, web-vitals |
Beware the Faux Bold (and How to Fix It) (ric) | | 171 |
typography, css |
Fast and Smooth Third-Party Web Fonts (sco) | | 170 |
embed-code, performance, css, javascript |
Fabulous Font-Face Fallbacks (sto) | | 169 |
performance, css, typography |
Preloading Fonts for Web Performance With “link rel=preload” (acc/mat) | | 168 |
performance, preloading, html, hints |
Fonts (bra/htt) | | 167 |
web-almanac, studies, research, metrics |
What Makes a Font Accessible? A Designer’s Guide (a11) | | 166 |
guides, design, typography, accessibility |
Features of Your Font You Had No Idea About (ole) | | 165 |
variable-fonts, css |
Quick Guide to Web Typography for Developers (ole) | | 164 |
guides, typography, examples |
The Ultimate Guide to Font Performance Optimization (deb) | | 163 |
guides, performance, optimization |
The Monospace Web | | 162 |
design |
WOFF File Format 2.0 (w3c) | | 161 |
woff, standards |
State of Text Rendering 2024 | | 160 |
rendering |
Beyond Monospace: The Search for the Perfect Coding Font (rom+/evi) | | 159 |
developer-experience |
Going Beyond Pixels and (r)ems in CSS—Relative Length Units Based on Font (uti/iod) | | 158 |
css, units |
Animating Font Palette (man) | | 157 |
css, colors, effects |
Installing Google Fonts as npm Packages (ami) | | 156 |
installing, tooling, dependencies, google |
The Most Accessible Font | | 155 |
accessibility, typography, legibility |
How to Use a Color Font (man) | | 154 |
how-tos, css |
The 3 Secrets to Font Pairing | | 153 |
typography, design |
Optimizing Web Fonts | | 152 |
css, performance, optimization |
WOFF Has Left the Building (mat) | | 151 |
woff, typography, css, support |
The New Google Fonts: Find What You’re Looking For (tob) | | 150 |
google |
Thinking on Ways to Solve Adaptive Typography (arg/dev) | | 149 |
videos, typography, css |
Using Emoji on the Web (oll) | | 148 |
emoji, support, unicode |
The New “@ font-face” Syntax (oll) | | 147 |
css |
What’s Your Type? Try These Tests to Pick the Perfect Font for You (was) | | 146 |
design, typography |
Typography for Everyone (tob/btc) | | 145 |
videos, typography |
How to Use Google Fonts and “font-display” | | 144 |
how-tos, google, css |
Modern Font Stacks | | 143 |
websites, typography |
16 Little UI Design Tips That Make a Big Impact | | 142 |
design, tips-and-tricks, spacing, consistency, colors, contrast, typography |
Handling CSS Color Fonts With “font-palette” (sta) | | 141 |
css, colors |
Managing Fonts in WordPress Block Themes (css) | | 140 |
wordpress, theming |
How to Password-Protect a Static HTML Page With No JS (ede) | | 139 |
how-tos, security, css |
Improved Font Fallbacks (dev) | | 138 |
typography, graceful-degradation |
How to Pick a Font (That Doesn’t Suck) | | 137 |
how-tos, guides, typography |
Quick Thoughts on Typeface and Font Accessibility | | 136 |
accessibility, typography |
The Final Google Fonts Knowledge Drop of 2022 (ell) | | 135 |
google, typography |
From Type to Logotype | | 134 |
typography, design, branding, logos |
Advanced Web Font Optimization Techniques | | 133 |
typography, optimization |
Hands-On Guide to Color Fonts and “@ font-palette-values” (zor/css) | | 132 |
videos, guides, css |
This Site’s Type Is Now Variable (ell) | | 131 |
typography, variable-fonts, css |
Fonts (htt) | | 130 |
web-almanac, studies, research, metrics |
First Batch of Color Fonts Arrives on Google Fonts | | 129 |
google, typography, colors |
Which Fonts to Use for Your Charts and Tables | | 128 |
information-design, tables |
Front-End Internationalisation Tips | | 127 |
internationalization, css, javascript |
The Joy of Variable Fonts: Getting Started on the Frontend (rom+/evi) | | 126 |
variable-fonts, css, introductions |
Do Dyslexia Fonts Improve Accessibility? | | 125 |
accessibility |
Measuring the Performance of Typefaces for Users II (sma) | | 124 |
typography, performance |
Measuring the Performance of Typefaces for Users (sma) | | 123 |
typography, performance |
Customizing Color Fonts on the Web (web) | | 122 |
colors, customization |
Best Font for Online Reading: No Single Answer (nng) | | 121 |
studies, research, typography, readability |
Fonts for the Web: Rationale, 1996 (svg/w3c) | | 120 |
history |
Childish Font Sizes (tyl/clo) | | 119 |
readability, design |
Fonts in Use: Variable Fonts | | 118 |
typography, variable-fonts |
Variable Fonts in Real Life: How to Use and Love Them (rom+/evi) | | 117 |
variable-fonts, typography |
Identifying Fonts: The Complete Guide | | 116 |
guides, typography |
Don’t Believe the Type! (deq) | | 115 |
videos, accessibility, typography, readability |
Minimizing Google Fonts by Only Loading It for Certain Characters (ami) | | 114 |
typography, google, performance, minimalism |
Why You Should Use a Developer Font | | 113 |
typography, productivity |
How to Avoid Layout Shifts Caused by Web Fonts (sim) | | 112 |
how-tos, performance, user-experience |
Google Fonts Knowledge (ell) | | 111 |
google, typography |
What Are Accessible Fonts? | | 110 |
accessibility |
What Creating a Simple Font Taught Me About Font Design (uxd) | | 109 |
typography |
Firefox’s “bolder” Default Is a Problem for Variable Fonts (sim/css) | | 108 |
css, variable-fonts, browsers, mozilla, firefox |
Avoiding FOUT With Async CSS | | 107 |
flash-of-x, css, asynchronicity |
Times New Roman Doesn’t Have to Be Boring—Here’s Why (uxd) | | 106 |
typography |
All You Need Is 5 Fonts (uxd) | | 105 |
design, typography |
Optical Size, the Hidden Superpower of Variable Fonts (pix) | | 104 |
css, variable-fonts, typography |
Best Practices for Fonts (tun/dev) | | 103 |
best-practices, performance |
Uniwidth Typefaces for Interface Design (uxd) | | 102 |
typography |
Why You Should Self-Host Google Fonts in 2021 | | 101 |
google |
Time to Say Goodbye to Google Fonts: Cache Performance | | 100 |
google, caching, performance |
Leveraging System Fonts on the Web (jim) | | 99 |
|
Use Advanced Typography With Local Fonts (tom/dev) | | 98 |
typography, apis |
Happy Birthday Web Fonts! (w3c) | | 97 |
anniversaries, woff, standards |
Speed Up Google Fonts (css) | | 96 |
performance, google |
Dark Mode and Variable Fonts (fon/css) | | 95 |
dark-mode, variable-fonts, css |
Improving Perceived Performance With the CSS “font-display” Property (the) | | 94 |
performance, css |
Should You Self-Host Google Fonts? (tun) | | 93 |
google, hosting, performance |
How to Convert Variable TTF Font Files to WOFF2 (hen) | | 92 |
how-tos, variable-fonts, woff, typography, conversion |
Interactivity and Animation With Variable Fonts (man/24w) | | 91 |
variable-fonts, animations, javascript, css |
Dynamic Typography With Variable Fonts (btc) | | 90 |
videos, typography, variable-fonts |
Optimizing Google Fonts Performance (sma) | | 89 |
google, performance, optimization |
The Scoville Scale of Web Font Loading Opinions (zac/btc) | | 88 |
videos, performance |
The Serif Tax (chr/css) | | 87 |
performance |
Typography for Developers (css) | | 86 |
typography, legibility, readability, css, link-lists |
CSS Fonts 3 Is a W3C Recommendation (svg/w3c) | | 85 |
css, standards |
Variable Fonts: What They Are, and How to Use Them | | 84 |
how-tos, variable-fonts, performance |
Icon Fonts vs. SVGs—Which One Should You Use in 2018? | | 83 |
icon-fonts, svg, images |
Weird Things Variable Fonts Can Do (chr/css) | | 82 |
variable-fonts |
Web Fonts Working Group Announces WOFF 2.0 File Format | | 81 |
w3c, woff, standards |
Three Techniques for Performant Custom Font Usage (oll/css) | | 80 |
performance, techniques, flash-of-x |
Understanding Web Fonts and Getting the Most Out of Them (thi/css) | | 79 |
woff, css, typography, variable-fonts |
Introduction to Variable Fonts on the Web (dav+/dev) | | 78 |
introductions, variable-fonts, css |
FOIT vs. FOUT, a Side by Side Comparison (zac) | | 77 |
user-experience, flash-of-x, comparisons |
Using Webfonts (ali) | | 76 |
css |
CSS “font-display”: The Future of Font Rendering on the Web | | 75 |
css, typography |
If You Really Dislike FOUT, “font-display: optional” Might Be Your Jam (chr/css) | | 74 |
flash-of-x, css |
Optimizing Web Fonts for Performance: The State of the Art | | 73 |
performance, optimization |
Get Started With Variable Fonts (ric) | | 72 |
introductions, variable-fonts |
Free Fonts With Personality and Style (sma) | | 71 |
link-lists |
Align SVG Icons to Text and Say Goodbye to Font Icons | | 70 |
svg, images, icons, icon-fonts, css, design, alignment |
Experimenting With Color Fonts (fon/css) | | 69 |
colors, experiments |
Webfonts on the Prairie (ali) | | 68 |
metrics |
A New Responsive Font Format for the Web (fon/css) | | 67 |
variable-fonts, responsive-design |
Seriously, Don’t Use Icon Fonts (tyl/clo) | | 66 |
icon-fonts, html, quality |
Loading Web Fonts With the Web Font Loader (fon/css) | | 65 |
flash-of-x, performance, user-experience |
4 Expert Tips for Getting the Most Out of Google Fonts | | 64 |
google, tips-and-tricks |
Using Web Fonts the Best Way (in 2015) (hel) | | 63 |
performance |
Type Is Visible Language (esp/btc) | | 62 |
videos, typography |
The Mitt Romney Web Font Problem (zac) | | 61 |
flash-of-x, user-experience, css, javascript |
Monotype Is Introducing an HTML5-Based Web Font Platform | | 60 |
html |
Variable Fonts for Responsive Design (nic/ali) | | 59 |
variable-fonts, responsive-design |
The Good, the Bad, and the Great Examples of Web Typography (sma) | | 58 |
typography, examples |
3 Principles for Perfect Typeface Pairing | | 57 |
typography, principles |
Minimising Font Downloads (jaf) | | 56 |
css, performance, optimization, support, browsers |
The Latest in Web Font Trends (ali) | | 55 |
trends |
Thought Process of a Front End Problem (chr/css) | | 54 |
processes, debugging, opera, browsers |
What Are Icon Fonts? | | 53 |
icon-fonts |
Preventing the Performance Hit from Custom Fonts (chr/css) | | 52 |
performance, ajax, jquery, lazy-loading |
Font Hinting and the Future of Responsive Typography (nic/ali) | | 51 |
typography, responsive-design |
A Critical Approach to Typefaces (sma) | | 50 |
typography |
5 Use Cases for Icon Fonts (css) | | 49 |
icon-fonts, examples, css |
WOFF File Format 1.0 (typ+/w3c) | | 48 |
woff, standards |
Why Won’t Helvetica Go Away? (sma) | | 47 |
typography, history |
HTML for Icon Font Usage (chr/css) | | 46 |
html, icon-fonts, semantics |
A Closer Look at Font Rendering (sma) | | 45 |
rendering, typography |
Custom Fonts in Emails (chr/css) | | 44 |
email |
Creating Custom Font Stacks with “unicode-range” (dre/24w) | | 43 |
css, unicode |
The “@ font-face” Rule and Useful Web Font Tricks (ope/sma) | | 42 |
css, tips-and-tricks |
A Solution to Stop Font Face Fonts Looking Bold on Mac Browsers | | 41 |
css, browsers, apple, unix-like |
The Future of Web Fonts Is Sooner Than It Used to Be | | 40 |
woff, design |
Web Could Be Stylized by New W3C Font Platform | | 39 |
web, woff, w3c |
Quick Guide to Implement Webfonts via “@ font-face” (pau/dev) | | 38 |
guides, css |
Frontend SPOF | | 37 |
performance, html, javascript, css |
Google Fonts Is Born—Can I Get a Hallelujah!? (mis) | | 36 |
google, typography |
2010: Web Fonts Are Here and Ready to Use (bra/aja) | | 35 |
google, foss |
On Web Typography (jas/ali) | | 34 |
typography, legibility, readability |
Web Open Font Format for Firefox 3.6 (moz) | | 33 |
woff, firefox, mozilla, browsers |
“@ font-face” Is Cool… but Does It Scale? (oct/aja) | | 32 |
css, performance |
More “@ font-face” Fun (zol) | | 31 |
css |
“@ font-face” in Depth (zol) | | 30 |
css |
IKEA and the Font Fiasco | | 29 |
typography, case-studies |
Friends Don’t Let Friends Use Comic Sans | | 28 |
design |
Font Embedding Now (dav) | | 27 |
css |
Web Fonts: Do Something Positive! (sen) | | 26 |
|
Fuck the Foundries (div) | | 25 |
typography |
8 Definitive Web Font Stacks | | 24 |
typography |
Font MIME Types (ann) | | 23 |
mime-types |
The Coming Battle Over Web Fonts | | 22 |
|
Web Typography: Tell Me What You Want (jas) | | 21 |
w3c, typography, css |
Which Are More Legible: Serif or Sans Serif Typefaces? (ale) | | 20 |
legibility, typography, studies, research |
The Principles of Beautiful Typography (jas) | | 19 |
principles, typography, readability, legibility |
Font Rendering Differences: Firefox vs. IE vs. Safari (chr/css) | | 18 |
css, rendering, firefox, mozilla, internet-explorer, microsoft, safari, apple, browsers, comparisons |
80 Beautiful Typefaces for Professional Design (sma) | | 17 |
design |
Study of Free/Shareware Web Fonts | | 16 |
studies, research |
sJIR: scalable Jens Image Replacement | | 15 |
image-replacement, techniques, javascript |
Origins of Verdana/Tahoma (dav) | | 14 |
typography |
A Comparison of Popular Online Fonts: Which Size and Type Is Best? | | 13 |
legibility, comparisons, studies, research |
About the Hiragino Fonts With CSS (hsi) | | 12 |
unix-like, css |
Fallback Font Generator (scr) | | 11 |
tools, exploration, typography, code-generation |
Google Web Fonts Helper | | 10 |
tools, exploration, code-generation, google, typography |
Web Font Generator | | 9 |
tools, exploration, typography |
Font Tester | | 8 |
tools, exploration, typography |
Font Style Matcher | | 7 |
tools, exploration, typography, css |
Font Pairing Generator | | 6 |
tools, exploration, typography, comparisons |
Font Family Support Checker (zac) | | 5 |
tools, exploration, typography, support |
Font Determiner | | 4 |
tools, exploration, typography |
Font Comparer | | 3 |
tools, exploration, typography, comparisons |
Font Capability Checker (pix) | | 2 |
tools, exploration, typography |
Icon Font, SVG, PDF, and PNG Generator | | 1 |
tools, exploration, images, code-generation, icon-fonts, svg, pdf, png |