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

“typography” News Archive

Definition, related topics, tag feed

Definition · Supertopics: design · Subtopics: fonts, legibility, readability (non-exhaustive) · “typography” × ? · “typography” RSS feed (per email)

Entry (Sources) and Additional TopicsDate#
Fluid Typography (don)305
css, accessibility
Typography Scales (don)304
css, design-tokens, accessibility
Using Maths to Balance Your Heading Styles (cra)303
headings, math, css, accessibility
The Ampersand Is Nearly 2,000 Years Old—and Designers Still Can’t Agree How It Should Look (web)302
design
Keeping Type Consistent in Changing Conditions (ell)301
variable-fonts, fonts
Are We Stuck in the Typographic Principles of the 20th Century? (its)300
Fluid Typography With “progress()” (mat/fro)299
css, functions, liquid-design
FIFA’s World Cup Typography Foul: UI Design Learnings (pim)298
fonts, legibility
AI Has Come for Serif Fonts (wir)297
ai, design
Why AI Won’t Replace Human Type Designers296
ai, fonts, design, career
The Day CSS Made Me Learn Algebra Again, and I Liked It (sch)295
css, math, examples
Logo Design Trends for 2026: What I’m Actually Seeing (and What Most Designers Are Missing) (web)294
design, logos, images, trends
Container Query Typography Systems (mat)293
css, container-queries
Building Typographic Scales in CSS With “:heading()”, “sibling-index()”, and “pow()” (stu)292
css, functions, math
Justifying “text-wrap: pretty”291
css
How to Use Font Ligatures290
how-tos, fonts, tooling, adobe, figma, microsoft, css
V7: Typographic Scales and Technical Pens289
design, css, case-studies
Responsive and Fluid Typography With Baseline CSS Features (mia)288
css, responsive-design
Getting Creative With “the Measure” (mal/css)287
css, readability
Solving Small Text and Contrast Issues for Large-Screen Readability (a11)286
accessibility, contrast, readability
Responsive Letter Spacing (tyl/clo)285
responsive-design, css
When to Use CSS “text-wrap: balance” vs. “text-wrap: pretty” (dxn/log)284
css
How to Use CSS “line-clamp” to Trim Lines of Text (dxn/log)283
how-tos, css
Solved by Modern CSS: Section Layout (sha)282
css, layout, grids, liquid-design
Compressed Fluid Typography (mat)281
css, liquid-design
Fluid Headings (don)280
headings, css, responsive-design
Testing Methods: Text Spacing (dec)279
accessibility, testing, wcag, readability
Five Years of Design278
design
Design Can’t Rely on Logic: Troy Leinster on Type Design and Human Perception (int)277
podcasts, interviews, design, fonts
Visualizing Responsive Typography (mia/odd)276
css, responsive-design, functions
On Dashes, AI, and Screen Readers (ons/tpg)275
ai, screen-readers, accessibility
This One CSS Property Fixed My Font Headaches Forever274
css
Designing for User Font-Size and Zoom (mia/odd)273
design, zooming, css, units, functions
Setting Line Length in CSS (and Fitting Text to a Container) (dxn/css)272
css, units
It’s More Than Picking a Pretty Font271
accessibility, fonts, legibility, readability, wcag
Font Size Dimensions (don)270
css, units
Why Fonts Look Better on macOS Than on Windows269
fonts, readability, macos, windows, comparisons
A11y 101: 1.4.12 Text Spacing (nat)268
introductions, accessibility, wcag
Painting With the Web (mat/btc)267
videos, web, web-platform, design
Polishing Your Typography With Line Height Units (web)266
css, units
Web Typography: A Refresher and History (zel)265
history, link-lists
“Pretty” Is in the Eye of the Beholder (geo/css)264
css, browsers, support, chrome, safari
Thin Fonts Are a Usability Nightmare—and Finally, Designers Are Waking Up (web)263
fonts, usability, accessibility, design
Better Typography With “text-wrap: pretty” (web)262
css, webkit, browser-engines, browsers, safari
Mastering Typography in Design Systems With Semantic Tokens and Responsive Scaling261
design-systems, design-tokens, semantics, responsive-design, scaling
Layered Text Headers (chr/fro)260
css, svg, shadows
Revisiting Fluid Type (ric+/odd)259
videos, interviews, fonts, responsive-design
How to Use “attr()” in CSS for Columns, Colors, and Font-Size (chr/fro)258
how-tos, css, functions, layout, colors
Justified Text, JS “moveBefore” Method, Performance Optimization (zor/css)257
videos, css, javascript, performance, optimization
The Hardest Working Font in Manhattan (mwi)256
fonts, history
Reimagining Fluid Typography (mia/odd)255
css, responsive-design, liquid-design
Better Text Rendering in Chromium-Based Browsers on Windows (pat)254
rendering, browser-engines, browsers, chromium, windows
Beware the Faux Bold (and How to Fix It) (ric)253
fonts, css
Change “font-weight” Based on the User’s Screen DPI252
css, pixel-density
CSS “text-box-trim” (arg)251
css
Justified Text: Better Than Expected? (tyl/clo)250
css
Fabulous Font-Face Fallbacks (sto/per)249
performance, css, fonts
“text-box” (fon)248
css, spacing
CSS “margin-trim” and Line Height Units (5t3)247
css, margins, units
CSS “text-wrap” (mey/5t3)246
css
What’s the Deal With WebKit Font Smoothing? (dbu)245
webkit, css
An HTML Email Template With Basic Typography and Dark/light Modes (chr/fro)244
templates, html, email, dark-mode
What Makes a Font Accessible? A Designer’s Guide (a11)243
guides, design, fonts, accessibility
Please, Don’t Use Viewport Units for Font Sizes (kev)242
videos, css, units
The Problem With Superscripts and Subscripts (ric)241
css
The Problem of the Em Square240
design, history
Quick Guide to Web Typography for Developers (ole)239
guides, fonts, examples
Mastering Typography in Logo Design (sma)238
design, images, logos
Fluid Typography in Design Systems: From Design to Code (fel)237
design, design-systems, design-tokens
“font-size” Limbo (seb)236
design, css
Figma Typography Variables (fro)235
figma, variables
CSS “font-size-adjust” Is Now in Baseline234
css, browsers, support, web-platform
Dynamic Type on the Web (cho)233
css, apple, unix-like, accessibility
Setting Up Typography Variables in Figma232
figma, variables
Use of “ch” Unit Considered Inappropriate (in Certain Circumstances) (ric)231
css, units
Typographer vs. Accessibility (pim/btc)230
videos, accessibility
Typography Terms: Glossary (tbf/nng)229
terminology
Creating Fluid Typography With the CSS “clamp()” Function228
css, functions, liquid-design
Typography Variables in Figma Are Here (joe)227
variables, figma
The Basics of Legibility226
fundamentals, legibility
Hanging Punctuation in CSS225
css
Fluid Typography With Discrete Steps (css)224
css, tips-and-tricks
Spicing Up Text With “text-emphasis” in CSS (ami)223
css, effects
The Problem With Data Attributes for Text Effects (man)222
html, custom-data, css, effects
Retrofitting Fluid Typography (ric)221
liquid-design, css
Making the Most of Ligatures (man)220
css
Nicer Text Wrapping With CSS “text-wrap” (lon)219
css
The AI Dilemma in Graphic Design: Steering Towards Excellence in Typography and Beyond (sma)218
ai, design
The Most Accessible Font217
accessibility, legibility, fonts
The “hanging-punctuation” Property in CSS (chr)216
css
CSS “text-wrap: pretty” (arg)215
css, browsers, chrome, support
When to Use CSS “text-wrap: balance;” vs. “text-wrap: pretty;” (sea)214
css, comparisons
The 3 Secrets to Font Pairing213
fonts, design
8 More Micro Tips for Remarkably Better Typography212
tips-and-tricks, legibility, readability
Responsive Type Scales With Composable CSS Utilities211
css, responsive-design
WOFF Has Left the Building (mat)210
fonts, woff, css, support
8 Micro Tips for Remarkably Better Typography209
tips-and-tricks, readability
Thinking on Ways to Solve Adaptive Typography (arg)208
videos, css, fonts
Adapting Typography to User Preferences With CSS (arg)207
css, customization
Fluid vs. Responsive Typography With CSS Clamp (its/log)206
css, functions, responsive-design
Figma Typography Secrets—Seven Pro Tips Revealed (pim)205
figma
90s Websites—Key Characteristics and Examples204
design, history, trends, navigation, colors
Mapping Typography (sco/9el)203
videos, css
What’s Your Type? Try These Tests to Pick the Perfect Font for You (was)202
design, fonts
Text Wrap Pretty Is Coming to CSS (ami)201
css
7 Practical CSS Typography Tips and Tricks (zor/css)200
videos, css, tips-and-tricks
Typography for Everyone (tob/btc)199
videos, fonts
Container Query Units and Fluid Typography (5t3)198
css, container-queries, liquid-design
CSS Text Balancing With “text-wrap: balance” (sha)197
css
The IL1 Typography Test (nng)196
videos, legibility, user-experience, testing
Preventing Too-Short Final Lines of Text Blocks (ric)195
css
Modern Font Stacks194
websites, fonts
16 Little UI Design Tips That Make a Big Impact193
design, tips-and-tricks, spacing, consistency, colors, contrast, fonts
An End to Typographic Widows on the Web (ric)192
css
Balanced Text Wrapping Is Coming to CSS (ami)191
css
Responsive Headlines Are About to Get Awesome (tyl/clo)190
css, headings, responsive-design
Improved Font Fallbacks189
fonts, graceful-degradation
How to Pick a Font (That Doesn’t Suck)188
how-tos, guides, fonts
Typography Manual187
code-pens
Typographic Hierarchy in Print, Web, and App Design (pim)186
design, hierarchy
Container Queries and Typography (fon)185
css, container-queries
On-Scroll Typography Animations (cod)184
animations
Greater Styling Control Over Type With “initial-letter” (sea)183
css
Quick Thoughts on Typeface and Font Accessibility182
accessibility, fonts
Fluid Typography: Predicting a Problem With Your User’s Zoom-In (sma)181
css, accessibility, zooming
An Ultimate Guide on Sizing, Spacing, Grids, and Layout in Web and UI/UX Design (sma)180
guides, spacing, grids, layout, design
How to Create Typography Guidelines for a Product That Does Not Follow a Design System179
how-tos, design-systems
From Type to Logotype178
fonts, design, branding, logos
A Conversation With ChatGPT (mat)177
interviews, ai, chatgpt, design
The Final Google Fonts Knowledge Drop of 2022 (ell)176
google, fonts
Advanced Web Font Optimization Techniques175
fonts, optimization
How to Use Huge Type on the Web174
how-tos, design
CSS Ellipsis for Single-Line and Multi-Line Text173
css
Typographic Hierarchies (sma)172
design
Easy Fluid Typography With “clamp()” Using Sass Functions (uti/sma)171
liquid-design, css, sass, functions
This Site’s Type Is Now Variable (ell)170
fonts, variable-fonts, css
First Batch of Color Fonts Arrives on Google Fonts169
google, fonts, colors
CSS “line-height” (mar)168
css
Adventures in Text Rendering: Kerning and Glyph Atlases167
rendering, kerning
Typography in Web Design (uxm)166
design
The Right Space Around Headings in Web Typography (pim)165
spacing, headings
The Dos and Don’ts of Pairing Typefaces (nng)164
design, readability, legibility, usability
Measuring the Performance of Typefaces for Users II (sma)163
fonts, performance
Web Typography: Establishing a Strong Typographic System (mis)162
Measuring the Performance of Typefaces for Users (sma)161
fonts, performance
Tokens as Intents (don)160
design-tokens, naming
Legibility—How and Why Typography Affects Ease of Reading159
websites, books, legibility
Deep Dive Into Text Wrapping and Word Breaking (lon)158
css, deep-dives
Best Font for Online Reading: No Single Answer (nng)157
studies, research, fonts, readability
Fonts in Use: Variable Fonts156
fonts, variable-fonts
Variable Fonts in Real Life: How to Use and Love Them (rom+/evi)155
fonts, variable-fonts
Typography in Design Tokens for Figma and Code154
design-tokens, tooling, figma
Identifying Fonts: The Complete Guide153
guides, fonts
Don’t Believe the Type! (gar+/deq)152
videos, accessibility, readability, fonts
Minimizing Google Fonts by Only Loading It for Certain Characters (ami)151
google, fonts, performance, minimalism
Why You Should Use a Developer Font150
fonts, productivity
Modern Fluid Typography Using CSS Clamp (cod/sma)149
css, liquid-design
Styling Strategies Using Typography148
Consistent, Fluidly Scaling Type, and Spacing (bel/css)147
css, scaling, liquid-design
The Ideal Line Length and Line Height in Web Design (pim)146
design, readability
Google Fonts Knowledge (ell)145
google, fonts
What Creating a Simple Font Taught Me About Font Design144
fonts
What’s the Right Font Size in Web Design? (pim)143
design
Line Length Revisited: Following the Research142
design, readability, research
Times New Roman Doesn’t Have to Be Boring—Here’s Why141
fonts
All You Need Is 5 Fonts140
design, fonts
Optical Size, the Hidden Superpower of Variable Fonts (pix)139
css, fonts, variable-fonts
Intrinsic Typography Is the Future of Styling Text on the Web (css)138
css
How I’m Dealing With Font Sizes (geo)137
css
Uniwidth Typefaces for Interface Design136
fonts
Symbols to Copy135
tooling
CSS “min()”, “max()”, and “clamp()” (una)134
css, functions
“font-kerning” (geo/css)133
css, kerning
The Thing With Leading in CSS (mat)132
css
Use Advanced Typography With Local Fonts (tom)131
fonts, apis
“font-weight: 300” Considered Harmful (chr/css)130
css, legibility
Modern CSS Techniques to Improve Legibility (sma)129
css, techniques, legibility
“font-weight: 300” Considered Harmful (and a Fontconfig Workaround) (lis)128
css, legibility, unix-like
The Secret of Typography, Kerning, Explained for Dummies127
kerning
How to Tame Line Height in CSS (css)126
how-tos, css
Accessible Font Sizing, Explained (css)125
accessibility, wcag, css, units
What Is Kerning? Here’s What You Need to Know124
kerning
How Do You Do “max-font-size” in CSS? (chr/css)123
css
How to Convert Variable TTF Font Files to WOFF2 (hen)122
how-tos, fonts, variable-fonts, ttf, woff, conversion
Dynamic Typography With Variable Fonts (btc)121
videos, fonts, variable-fonts
Design Principles for Developers: Processes and CSS Tips for Better Web Design (css)120
design, spacing, colors, principles, processes, css, tips-and-tricks
Typography for Developers (css)119
fonts, legibility, readability, css, link-lists
Six Tips for Better Web Typography (fon/css)118
design, tips-and-tricks
Colorful Typographic Experiments (chr/css)117
experiments, colors, css
Extreme Typography on the Web (djr/btc)116
videos
A Reference Guide for Typography in Mobile Web Design (sma)115
guides, terminology, mobile
Text Spacing Bookmarklet (ste)114
code-pens, bookmarklets, accessibility, wcag
Designing for Accessibility and Inclusion (sma)113
design, accessibility, dei, animations, colors, images, multimedia, keyboard-navigation, layout, readability
Understanding Web Fonts and Getting the Most Out of Them (thi/css)112
fonts, ttf, woff, css, variable-fonts
Universal Principles of User Experience Design (sma)111
user-experience, design, principles
Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility (bel/css)110
accessibility, semantics, contrast, colors, labels, forms, keyboard-navigation
CSS Line Spacing: How to Set Line Spacing109
how-tos, css
Web Typography: Designing Tables to Be Read, Not Looked At (ric/ali)108
readability, tables, responsive-design
CSS “font-display”: The Future of Font Rendering on the Web107
css, fonts
Improve Web Typography With CSS “font-size-adjust”106
css, optimization
Fluid Responsive Typography With CSS Poly Fluid Sizing (sma)105
responsive-design, liquid-design, css, sass
Typography Is Code (fra/btc)104
videos
Typography on the Web Is Like Other Typography Only More Interesting (kup/btc)103
videos
The 10 Big Web Design Trends of 2015102
design, layout, trends, minimalism, scrolling, flat-design, animations, colors, backgrounds
Space Yourself (mwi/sma)101
whitespace, css, unicode
Type Is Visible Language (esp/btc)100
videos, fonts
Typographic Units in CSS (joh)99
css, units
12 Little-Known CSS Facts (the Sequel) (lou)98
css, borders, tables, naming, animations, selectors
Sass and Responsive Typography97
sass, responsive-design
The Good, the Bad, and the Great Examples of Web Typography (sma)96
fonts, examples
3 Principles for Perfect Typeface Pairing95
fonts, principles
Better Web Typography With “font-weight”, Autohinting and “font-feature-settings” (zol)94
css, examples
Font Hinting and the Future of Responsive Typography (nic/ali)93
fonts, responsive-design
A Critical Approach to Typefaces (sma)92
fonts
Typography 10191
introductions, terminology
CSS Baseline: The Good, the Bad, and the Ugly (sma)90
css
Why Won’t Helvetica Go Away? (sma)89
fonts, history
A Closer Look at Font Rendering (sma)88
fonts, rendering
CSS Tip: An “em” Isn’t an “m”, but an “ex” Is an “x”87
css, units, tips-and-tricks
More Meaningful Typography (ali)86
css
Font Sizing With “rem” (jus)85
css, units
Technical Web Typography: Guidelines and Techniques (css/sma)84
css, guidelines, techniques
Tracking—CSS “letter-spacing” and Where to Use It83
css
Typographic Effects in Canvas82
canvas, javascript
A Simpler Page (cra/ali)81
design, readability, html, css, simplicity
Readability: The Optimal Line Length80
readability, usability
Typography Is Not Your Brand, So Don’t Steal It (tim)79
branding, design
“text-rendering: optimizeLegibility;” // Can You Read Me Now? (dal/aja)78
css, legibility
Google Fonts Is Born—Can I Get a Hallelujah!? (mis)77
google, fonts
The Future of CSS Typography (sma)76
css
On Web Typography (jas/ali)75
fonts, legibility, readability
W3C Cheatsheet (don/w3c)74
cheat-sheets, documentation, css, html, svg, xpath, accessibility, internationalization
Can Typekit Bring Fonts to the Web?73
fonts
IKEA and the Font Fiasco72
fonts, case-studies
How to Style Your Type With CSS71
css
Punctuation Cheat Sheet (j9t)70
localization, cheat-sheets
Focus on Typography: Contrast69
contrast, colors
Fuck the Foundries (div)68
fonts
8 Simple Typography Tips for Your Designs (sma)67
design, css, tips-and-tricks
10 Principles of Readability and Web Typography (sma)66
design, readability, principles
In Defense of Readers (ali)65
content, writing, readability
8 Definitive Web Font Stacks64
fonts
Typographic Grid (chr/css)63
grids
Use the Best Available Ampersand (sim)62
design
Setting Web Type to a Baseline Grid61
design, grids, css
W3C Tackles Web Typography With CSS 3 (cms)60
w3c, css, standards
Design Rants (dav)59
design, readability, responsive-design, semantics
“line-height: abnormal” (mey)58
css, browsers, support
Web Typography: Tell Me What You Want (jas)57
w3c, fonts, css
Which Are More Legible: Serif or Sans Serif Typefaces? (ale)56
fonts, legibility, studies, research
Squashing a Persistent Myth55
accessibility, css, units, myths
The Principles of Beautiful Typography (jas)54
principles, fonts, readability, legibility
How to Size Text in CSS (ric/ali)53
how-tos, css, resizing, browsers, safari
Understanding Web Design (zel/ali)52
design
Adams and Clarke on CSS, the W3C, and Design (mal+)51
interviews, design, css-eleven, w3c
Blueprint CSS Framework: Typography Matters (dal/aja)50
blueprint
Typography and Web Advertising: Making Every Opportunity Count (dig)49
design, monetization
Top Ten Tips for Web Typography (ric)48
tips-and-tricks
70 Expert Ideas for Better CSS Coding (sma)47
css, resets, conventions, hacks, debugging, selectors, tips-and-tricks, techniques, internet-explorer, conditional-comments, link-lists
Web Typography46
character-references
Admiration for Typography on the Web (jch)45
image-replacement
Compose to a Vertical Rhythm (ric/24w)44
css, headings
CSS “line-height” and Valid Values43
css
The 100% Easy-2-Read Standard (rei/ia)42
readability, principles
Five Simple Steps to Typesetting on the Web: Printing the Web (mar)41
print
Unitless Line-Heights (mey)40
css, units
The Elements of Typographic Style Applied to the Web (ric)39
websites, guides
An Explanation of Ems (ric/24w)38
units, css
Typography—a Dying Art Form? (mar)37
The Effects of Line Length on Reading Online News36
studies, research, readability
Line Height35
css
Five Simple Steps to Better Typography (mar)34
css
SVG and Typography33
svg
Type: The Extra Mile (dav)32
legibility
The New Typography (ric)31
fonts, css
A Comparison of Two Computer Fonts: Serif Versus Ornate Sans Serif30
fonts, readability, legibility, comparisons
Understanding Web Typography—an Introduction29
introductions, fonts, html
Origins of Verdana/Tahoma (dav)28
fonts
Let Users Control Font Size (nng)27
usability, customization, readability
Reading Design (ali)26
design, content, readability
Typography Matters (kis/ali)25
content, readability
The Trouble With “em” ’n “en” (and Other Shady Characters) (ali)24
html, unicode, character-references
CSS Design: Size Matters (ali)23
css, browsers, netscape, internet-explorer, support
Collecting Your Font Styles22
css
Typography Glossary21
terminology
Cap Sizer20
tools, exploration, code-generation
CSS Fluid Typography Generator (cod)19
tools, exploration, code-generation, css, liquid-design
Font Capability Checker (pix)18
tools, exploration, fonts
Font Comparer17
tools, exploration, fonts, comparisons
Font Determiner16
tools, exploration, fonts
Font Family Support Checker (zac)15
tools, exploration, fonts, support
Font Pairing Generator14
tools, exploration, fonts, comparisons
Font Style Matcher13
tools, exploration, fonts, css
Font Tester12
tools, exploration, fonts
Golden Ratio Typography Calculator11
tools, exploration
Text Decoration Generator10
tools, exploration, decoration
Type Scale Generator (Jeremy Church)9
tools, exploration, code-generation
Type Scale Generator (Tim Brown) (tim)8
tools, exploration, code-generation
Web Font Generator7
tools, exploration, fonts
Fluid Type Scale Generator (Aleksandr Hovhannisyan) (ale)6
tools, exploration, code-generation
Google Web Fonts Helper5
tools, exploration, code-generation, google, fonts
Fallback Font Generator (scr)4
tools, exploration, fonts, code-generation
Text-to-Unicode Range Generator (sto)3
tools, exploration, fonts, code-generation, css
Fluid Type Scale Generator (James Gilyead and Trys Mudford) (j98+)2
tools, exploration, code-generation, css, sass, postcss
Font License Checker1
tools, exploration, fonts, licensing