Frontend Dogma

“typography” Archive

Supertopics: · subtopics: , ,  (non-exhaustive) · glossary look-up: “typography”

Entry (Sources) and Other Related TopicsDate#
Why Fonts Look Better on macOS Than on Windows (uxd)234
, , , , , ,
A11y 101: 1.4.12 Text Spacing (nat)233
, ,
Painting With the Web (mat/btc)232
, , ,
Polishing Your Typography With Line Height Units (jen/web)231
,
Web Typography: A Refresher and History (zel)230
,
“Pretty” Is in the Eye of the Beholder (geo/css)229
, , , , , ,
Thin Fonts Are a Usability Nightmare—and Finally, Designers Are Waking Up (web)228
, , ,
Better Typography With “text-wrap: pretty” (jen/web)227
, , , , ,
Mastering Typography in Design Systems With Semantic Tokens and Responsive Scaling (uxd)226
, , , ,
Layered Text Headers (chr/fro)225
, ,
Revisiting Fluid Type (ric+/odd)224
, , ,
Justified Text, JS “moveBefore” Method, Performance Optimization (zor/css)223
, , , ,
How to Use “attr()” in CSS for Columns, Colors, and Font-Size (chr/fro)222
, , , ,
The Hardest Working Font in Manhattan (mwi)221
,
Better Text Rendering in Chromium-Based Browsers on Windows (pat/dev)220
, , , , ,
Reimagining Fluid Typography (mia/odd)219
, ,
Beware the Faux Bold (and How to Fix It) (ric)218
,
Change “font-weight” Based on the User’s Screen DPI217
,
Justified Text: Better Than Expected? (tyl/clo)216
CSS “text-box-trim” (arg/dev)215
Fabulous Font-Face Fallbacks (sto)214
, ,
“text-box” (fon)213
,
CSS “margin-trim” and Line Height Units (jen/5t3)212
, ,
CSS “text-wrap” (mey/5t3)211
What’s the Deal With WebKit Font Smoothing? (dbu)210
,
An HTML Email Template With Basic Typography and Dark/light Modes (chr/fro)209
, , ,
What Makes a Font Accessible? A Designer’s Guide (a11)208
, , ,
Please, Don’t Use Viewport Units for Font Sizes (kev)207
, ,
The Problem With Superscripts and Subscripts (ric)206
The Problem of the Em Square (uxd)205
,
Quick Guide to Web Typography for Developers (ole)204
, ,
Mastering Typography in Logo Design (sma)203
, ,
Fluid Typography in Design Systems: From Design to Code (fel/uxd)202
, ,
“font-size” Limbo (seb)201
,
Figma Typography Variables (fro)200
,
CSS “font-size-adjust” Is Now in Baseline (rac/dev)199
, , ,
Use of “ch” Unit Considered Inappropriate (in Certain Circumstances) (ric)198
,
Setting Up Typography Variables in Figma (uxd)197
,
Typographer vs. Accessibility (btc)196
,
Typography Terms: Glossary195
Creating Fluid Typography With the CSS “clamp()” Function194
, ,
Typography Variables in Figma Are Here193
,
The Basics of Legibility192
,
Hanging Punctuation in CSS (ada)191
Fluid Typography With Discrete Steps (css)190
,
Spicing Up Text With “text-emphasis” in CSS (ami)189
,
The Problem With Data Attributes for Text Effects (man)188
, , ,
Retrofitting Fluid Typography (ric)187
,
Making the Most of Ligatures (man)186
Nicer Text Wrapping With CSS “text-wrap” (lon)185
The AI Dilemma in Graphic Design: Steering Towards Excellence in Typography and Beyond (sma)184
,
The Most Accessible Font183
, ,
The “hanging-punctuation” Property in CSS (chr)182
CSS “text-wrap: pretty” (arg/dev)181
, , , ,
When to Use CSS “text-wrap: balance;” vs. “text-wrap: pretty;” (sea)180
,
The 3 Secrets to Font Pairing179
,
8 More Micro Tips for Remarkably Better Typography (uxd)178
, ,
Responsive Type Scales With Composable CSS Utilities177
,
WOFF Has Left the Building (mat)176
, , ,
8 Micro Tips for Remarkably Better Typography (uxd)175
,
Thinking on Ways to Solve Adaptive Typography (arg/dev)174
, ,
Adapting Typography to User Preferences With CSS (arg/dev)173
,
Fluid vs. Responsive Typography With CSS Clamp (its/log)172
, ,
Figma Typography Secrets—Seven Pro Tips Revealed171
90s Websites—Key Characteristics and Examples170
, , , ,
What’s Your Type? Try These Tests to Pick the Perfect Font for You (was)169
,
Mapping Typography (sco/9el)168
,
Text Wrap Pretty Is Coming to CSS (ami)167
7 Practical CSS Typography Tips and Tricks (zor/css)166
, ,
Typography for Everyone (tob/btc)165
,
Container Query Units and Fluid Typography (5t3)164
, ,
CSS Text Balancing With “text-wrap: balance” (sha)163
The IL1 Typography Test162
, , ,
Preventing Too-Short Final Lines of Text Blocks (ric)161
Modern Font Stacks160
,
16 Little UI Design Tips That Make a Big Impact159
, , , , , ,
An End to Typographic Widows on the Web (ric)158
Balanced Text Wrapping Is Coming to CSS (ami)157
Responsive Headlines Are About to Get Awesome (tyl/clo)156
, ,
Improved Font Fallbacks (dev)155
,
How to Pick a Font (That Doesn’t Suck)154
, ,
Typography Manual153
Typographic Hierarchy in Print, Web, and App Design152
,
Container Queries and Typography (fon)151
,
On-Scroll Typography Animations (cod)150
Greater Styling Control Over Type With “initial-letter” (sea)149
Quick Thoughts on Typeface and Font Accessibility148
,
Fluid Typography: Predicting a Problem With Your User’s Zoom-In (sma)147
, ,
An Ultimate Guide on Sizing, Spacing, Grids, and Layout in Web and UI/UX Design (sma)146
, , , ,
How to Create Typography Guidelines for a Product That Does Not Follow a Design System (uxd)145
,
From Type to Logotype144
, , ,
The Final Google Fonts Knowledge Drop of 2022 (ell)143
,
A Conversation With ChatGPT (mat)142
, , ,
Advanced Web Font Optimization Techniques141
,
How to Use Huge Type on the Web140
,
CSS Ellipsis for Single-Line and Multi-Line Text139
Typographic Hierarchies (sma)138
Easy Fluid Typography With “clamp()” Using Sass Functions (uti/sma)137
, , ,
This Site’s Type Is Now Variable (ell)136
, ,
First Batch of Color Fonts Arrives on Google Fonts135
, ,
CSS “line-height” (mar)134
Adventures in Text Rendering: Kerning and Glyph Atlases133
,
Typography in Web Design (uxm)132
The Right Space Around Headings in Web Typography131
,
The Dos and Don’ts of Pairing Typefaces130
, , ,
Measuring the Performance of Typefaces for Users II (sma)129
,
Web Typography: Establishing a Strong Typographic System (mis)128
Measuring the Performance of Typefaces for Users (sma)127
,
Tokens as Intents (don)126
,
Legibility—How and Why Typography Affects Ease of Reading125
, ,
Deep Dive Into Text Wrapping and Word Breaking (lon)124
,
Best Font for Online Reading: No Single Answer123
, , ,
Fonts in Use: Variable Fonts122
,
Variable Fonts in Real Life: How to Use and Love Them (evi)121
,
Typography in Design Tokens for Figma and Code120
, ,
Identifying Fonts: The Complete Guide119
,
Don’t Believe the Type! (deq)118
, , ,
Minimizing Google Fonts by Only Loading It for Certain Characters (ami)117
, , ,
Why You Should Use a Developer Font116
,
Modern Fluid Typography Using CSS Clamp (cod/sma)115
,
Styling Strategies Using Typography114
Consistent, Fluidly Scaling Type, and Spacing (bel/css)113
, ,
The Ideal Line Length and Line Height in Web Design112
Google Fonts Knowledge (ell)111
,
What Creating a Simple Font Taught Me About Font Design (uxd)110
What’s the Right Font Size in Web Design?109
Line Length Revisited: Following the Research108
, ,
Times New Roman Doesn’t Have to Be Boring—Here’s Why (uxd)107
All You Need Is 5 Fonts (uxd)106
,
Optical Size, the Hidden Superpower of Variable Fonts (pix)105
, ,
Intrinsic Typography Is the Future of Styling Text on the Web (css)104
Uniwidth Typefaces for Interface Design (uxd)103
Symbols to Copy102
CSS “min()”, “max()”, and “clamp()” (una/dev)101
,
“font-kerning” (geo/css)100
,
Use Advanced Typography With Local Fonts (tom/dev)99
,
The Thing With Leading in CSS (mat)98
“font-weight: 300” Considered Harmful (chr/css)97
,
Modern CSS Techniques to Improve Legibility (sma)96
, ,
“font-weight: 300” Considered Harmful (and a Fontconfig Workaround) (lis)95
, ,
The Secret of Typography, Kerning, Explained for Dummies (uxd)94
How to Tame Line Height in CSS (css)93
,
Accessible Font Sizing, Explained (css)92
, , ,
What Is Kerning? Here’s What You Need to Know91
How Do You Do “max-font-size” in CSS? (chr/css)90
How to Convert Variable TTF Font Files to WOFF2 (hen)89
, , , ,
Dynamic Typography With Variable Fonts (btc)88
, ,
Design Principles for Developers: Processes and CSS Tips for Better Web Design (css)87
, , , , , ,
Typography for Developers (css)86
, , , ,
Six Tips for Better Web Typography (fon/css)85
,
Colorful Typographic Experiments (chr/css)84
, ,
Extreme Typography on the Web (djr/btc)83
A Reference Guide for Typography in Mobile Web Design (sma)82
, ,
Text Spacing Bookmarklet (ste)81
, , ,
Designing for Accessibility and Inclusion (sma)80
, , , , , , , , ,
Understanding Web Fonts and Getting the Most Out of Them (thi/css)79
, , ,
Universal Principles of User Experience Design (sma)78
, ,
Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility (bel/css)77
, , , , , ,
CSS Line Spacing: How to Set Line Spacing76
,
Web Typography: Designing Tables to Be Read, Not Looked At (ric/ali)75
, ,
CSS “font-display”: The Future of Font Rendering on the Web74
,
Improve Web Typography With CSS “font-size-adjust”73
,
Fluid Responsive Typography With CSS Poly Fluid Sizing (sma)72
, , ,
Typography Is Code (fra/btc)71
Typography on the Web Is Like Other Typography Only More Interesting (kup/btc)70
The 10 Big Web Design Trends of 201569
, , , , , , , ,
Space Yourself (mwi/sma)68
, ,
Typographic Units in CSS (joh)67
,
Type Is Visible Language (esp/btc)66
,
12 Little-Known CSS Facts (the Sequel) (lou)65
, , , , ,
Sass and Responsive Typography64
,
The Good, the Bad, and the Great Examples of Web Typography (sma)63
,
3 Principles for Perfect Typeface Pairing62
,
Font Hinting and the Future of Responsive Typography (nic/ali)61
,
A Critical Approach to Typefaces (sma)60
Typography 10159
,
CSS Baseline: The Good, the Bad, and the Ugly (sma)58
Why Won’t Helvetica Go Away? (sma)57
,
A Closer Look at Font Rendering (sma)56
,
CSS Tip: An “em” Isn’t an “m”, but an “ex” Is an “x”55
, ,
More Meaningful Typography (ali)54
Font Sizing With “rem” (jus)53
,
Technical Web Typography: Guidelines and Techniques (css/sma)52
, ,
Tracking—CSS “letter-spacing” and Where to Use It51
Typographic Effects in Canvas (dev)50
,
A Simpler Page (cra/ali)49
, , , ,
Readability: The Optimal Line Length48
,
Typography Is Not Your Brand, So Don’t Steal It (tim)47
,
Google Fonts Is Born—Can I Get a Hallelujah!? (mis)46
,
The Future of CSS Typography (sma)45
On Web Typography (jas/ali)44
, ,
W3C Cheatsheet (don/w3c)43
, , , , , ,
IKEA and the Font Fiasco42
,
How to Style Your Type With CSS41
Punctuation Cheat Sheet (j9t)40
,
Focus on Typography: Contrast39
,
Fuck the Foundries (div)38
8 Simple Typography Tips for Your Designs (sma)37
, ,
10 Principles of Readability and Web Typography (sma)36
, ,
In Defense of Readers (ali)35
, ,
8 Definitive Web Font Stacks34
Typographic Grid (chr/css)33
W3C Tackles Web Typography With CSS 3 (cms)32
, ,
Design Rants (dav)31
, , ,
Web Typography: Tell Me What You Want (jas)30
, ,
The Principles of Beautiful Typography (jas)29
, , ,
Understanding Web Design (zel/ali)28
How to Size Text in CSS (ric/ali)27
, , , , ,
Compose to a Vertical Rhythm (ric/24w)26
,
Origins of Verdana/Tahoma (dav)25
Let Users Control Font Size24
, ,
Reading Design (ali)23
, ,
The Trouble With “em” ’n “en” (and Other Shady Characters) (ali)22
, ,
Typography Matters (kis/ali)21
,
CSS Design: Size Matters (ali)20
, , , , ,
Collecting Your Font Styles19
Fallback Font Generator (scr)18
, , ,
Google Web Fonts Helper17
, , , ,
Fluid Type Scale Generator (Aleksandr Hovhannisyan) (ale)16
, ,
Web Font Generator15
, ,
Type Scale Generator (Tim Brown) (tim)14
, ,
Type Scale Generator (Jeremy Church)13
, ,
Text Decoration Generator12
, ,
Golden Ratio Typography Calculator11
,
Font Tester10
, ,
Font Style Matcher9
, , ,
Font Pairing Generator8
, , ,
Font Family Support Checker (zac)7
, , ,
Font Determiner6
, ,
Font Comparer5
, , ,
Font Capability Checker (pix)4
, ,
Fluid Type Scale Generator (Marc-Aurele Legoux)3
, ,
CSS Fluid Typography Generator (cod)2
, , , ,
Cap Sizer1
, ,