Frontend Dogma

“typography” News Archive

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

Entry (Sources) and Other Related TopicsDate#
Setting Line Length in CSS (and Fitting Text to a Container) (dxn/css)238
,
It’s More Than Picking a Pretty Font (uxd)237
, , , ,
Font Size Dimensions (don)236
,
Why Fonts Look Better on macOS Than on Windows (uxd)235
, , , , , ,
A11y 101: 1.4.12 Text Spacing (nat)234
, ,
Painting With the Web (mat/btc)233
, , ,
Polishing Your Typography With Line Height Units (jen/web)232
,
Web Typography: A Refresher and History (zel)231
,
“Pretty” Is in the Eye of the Beholder (geo/css)230
, , , , , ,
Thin Fonts Are a Usability Nightmare—and Finally, Designers Are Waking Up (web)229
, , ,
Better Typography With “text-wrap: pretty” (jen/web)228
, , , , ,
Mastering Typography in Design Systems With Semantic Tokens and Responsive Scaling (uxd)227
, , , ,
Layered Text Headers (chr/fro)226
, ,
Revisiting Fluid Type (ric+/odd)225
, , ,
Justified Text, JS “moveBefore” Method, Performance Optimization (zor/css)224
, , , ,
How to Use “attr()” in CSS for Columns, Colors, and Font-Size (chr/fro)223
, , , ,
The Hardest Working Font in Manhattan (mwi)222
,
Better Text Rendering in Chromium-Based Browsers on Windows (pat/dev)221
, , , , ,
Reimagining Fluid Typography (mia/odd)220
, ,
Beware the Faux Bold (and How to Fix It) (ric)219
,
Change “font-weight” Based on the User’s Screen DPI218
,
Justified Text: Better Than Expected? (tyl/clo)217
CSS “text-box-trim” (arg/dev)216
Fabulous Font-Face Fallbacks (sto)215
, ,
“text-box” (fon)214
,
CSS “margin-trim” and Line Height Units (jen/5t3)213
, ,
CSS “text-wrap” (mey/5t3)212
What’s the Deal With WebKit Font Smoothing? (dbu)211
,
An HTML Email Template With Basic Typography and Dark/light Modes (chr/fro)210
, , ,
What Makes a Font Accessible? A Designer’s Guide (a11)209
, , ,
Please, Don’t Use Viewport Units for Font Sizes (kev)208
, ,
The Problem With Superscripts and Subscripts (ric)207
The Problem of the Em Square (uxd)206
,
Quick Guide to Web Typography for Developers (ole)205
, ,
Mastering Typography in Logo Design (sma)204
, ,
Fluid Typography in Design Systems: From Design to Code (fel/uxd)203
, ,
“font-size” Limbo (seb)202
,
Figma Typography Variables (fro)201
,
CSS “font-size-adjust” Is Now in Baseline (rac/dev)200
, , ,
Use of “ch” Unit Considered Inappropriate (in Certain Circumstances) (ric)199
,
Setting Up Typography Variables in Figma (uxd)198
,
Typographer vs. Accessibility (btc)197
,
Typography Terms: Glossary (tbf)196
Creating Fluid Typography With the CSS “clamp()” Function195
, ,
Typography Variables in Figma Are Here194
,
The Basics of Legibility193
,
Hanging Punctuation in CSS (ada)192
Fluid Typography With Discrete Steps (css)191
,
Spicing Up Text With “text-emphasis” in CSS (ami)190
,
The Problem With Data Attributes for Text Effects (man)189
, , ,
Retrofitting Fluid Typography (ric)188
,
Making the Most of Ligatures (man)187
Nicer Text Wrapping With CSS “text-wrap” (lon)186
The AI Dilemma in Graphic Design: Steering Towards Excellence in Typography and Beyond (sma)185
,
The Most Accessible Font184
, ,
The “hanging-punctuation” Property in CSS (chr)183
CSS “text-wrap: pretty” (arg/dev)182
, , , ,
When to Use CSS “text-wrap: balance;” vs. “text-wrap: pretty;” (sea)181
,
The 3 Secrets to Font Pairing180
,
8 More Micro Tips for Remarkably Better Typography (uxd)179
, ,
Responsive Type Scales With Composable CSS Utilities178
,
WOFF Has Left the Building (mat)177
, , ,
8 Micro Tips for Remarkably Better Typography (uxd)176
,
Thinking on Ways to Solve Adaptive Typography (arg/dev)175
, ,
Adapting Typography to User Preferences With CSS (arg/dev)174
,
Fluid vs. Responsive Typography With CSS Clamp (its/log)173
, ,
Figma Typography Secrets—Seven Pro Tips Revealed172
90s Websites—Key Characteristics and Examples171
, , , ,
What’s Your Type? Try These Tests to Pick the Perfect Font for You (was)170
,
Mapping Typography (sco/9el)169
,
Text Wrap Pretty Is Coming to CSS (ami)168
7 Practical CSS Typography Tips and Tricks (zor/css)167
, ,
Typography for Everyone (tob/btc)166
,
Container Query Units and Fluid Typography (5t3)165
, ,
CSS Text Balancing With “text-wrap: balance” (sha)164
The IL1 Typography Test163
, , ,
Preventing Too-Short Final Lines of Text Blocks (ric)162
Modern Font Stacks161
,
16 Little UI Design Tips That Make a Big Impact160
, , , , , ,
An End to Typographic Widows on the Web (ric)159
Balanced Text Wrapping Is Coming to CSS (ami)158
Responsive Headlines Are About to Get Awesome (tyl/clo)157
, ,
Improved Font Fallbacks (dev)156
,
How to Pick a Font (That Doesn’t Suck)155
, ,
Typography Manual154
Typographic Hierarchy in Print, Web, and App Design153
,
Container Queries and Typography (fon)152
,
On-Scroll Typography Animations (cod)151
Greater Styling Control Over Type With “initial-letter” (sea)150
Quick Thoughts on Typeface and Font Accessibility149
,
Fluid Typography: Predicting a Problem With Your User’s Zoom-In (sma)148
, ,
An Ultimate Guide on Sizing, Spacing, Grids, and Layout in Web and UI/UX Design (sma)147
, , , ,
How to Create Typography Guidelines for a Product That Does Not Follow a Design System (uxd)146
,
From Type to Logotype145
, , ,
The Final Google Fonts Knowledge Drop of 2022 (ell)144
,
A Conversation With ChatGPT (mat)143
, , ,
Advanced Web Font Optimization Techniques142
,
How to Use Huge Type on the Web141
,
CSS Ellipsis for Single-Line and Multi-Line Text140
Typographic Hierarchies (sma)139
Easy Fluid Typography With “clamp()” Using Sass Functions (uti/sma)138
, , ,
This Site’s Type Is Now Variable (ell)137
, ,
First Batch of Color Fonts Arrives on Google Fonts136
, ,
CSS “line-height” (mar)135
Adventures in Text Rendering: Kerning and Glyph Atlases134
,
Typography in Web Design (uxm)133
The Right Space Around Headings in Web Typography132
,
The Dos and Don’ts of Pairing Typefaces131
, , ,
Measuring the Performance of Typefaces for Users II (sma)130
,
Web Typography: Establishing a Strong Typographic System (mis)129
Measuring the Performance of Typefaces for Users (sma)128
,
Tokens as Intents (don)127
,
Legibility—How and Why Typography Affects Ease of Reading126
, ,
Deep Dive Into Text Wrapping and Word Breaking (lon)125
,
Best Font for Online Reading: No Single Answer124
, , ,
Fonts in Use: Variable Fonts123
,
Variable Fonts in Real Life: How to Use and Love Them (rom+/evi)122
,
Typography in Design Tokens for Figma and Code121
, ,
Identifying Fonts: The Complete Guide120
,
Don’t Believe the Type! (deq)119
, , ,
Minimizing Google Fonts by Only Loading It for Certain Characters (ami)118
, , ,
Why You Should Use a Developer Font117
,
Modern Fluid Typography Using CSS Clamp (cod/sma)116
,
Styling Strategies Using Typography115
Consistent, Fluidly Scaling Type, and Spacing (bel/css)114
, ,
The Ideal Line Length and Line Height in Web Design113
Google Fonts Knowledge (ell)112
,
What Creating a Simple Font Taught Me About Font Design (uxd)111
What’s the Right Font Size in Web Design?110
Line Length Revisited: Following the Research109
, ,
Times New Roman Doesn’t Have to Be Boring—Here’s Why (uxd)108
All You Need Is 5 Fonts (uxd)107
,
Optical Size, the Hidden Superpower of Variable Fonts (pix)106
, ,
Intrinsic Typography Is the Future of Styling Text on the Web (css)105
Uniwidth Typefaces for Interface Design (uxd)104
Symbols to Copy103
CSS “min()”, “max()”, and “clamp()” (una/dev)102
,
“font-kerning” (geo/css)101
,
Use Advanced Typography With Local Fonts (tom/dev)100
,
The Thing With Leading in CSS (mat)99
“font-weight: 300” Considered Harmful (chr/css)98
,
Modern CSS Techniques to Improve Legibility (sma)97
, ,
“font-weight: 300” Considered Harmful (and a Fontconfig Workaround) (lis)96
, ,
The Secret of Typography, Kerning, Explained for Dummies (uxd)95
How to Tame Line Height in CSS (css)94
,
Accessible Font Sizing, Explained (css)93
, , ,
What Is Kerning? Here’s What You Need to Know92
How Do You Do “max-font-size” in CSS? (chr/css)91
How to Convert Variable TTF Font Files to WOFF2 (hen)90
, , , ,
Dynamic Typography With Variable Fonts (btc)89
, ,
Design Principles for Developers: Processes and CSS Tips for Better Web Design (css)88
, , , , , ,
Typography for Developers (css)87
, , , ,
Six Tips for Better Web Typography (fon/css)86
,
Colorful Typographic Experiments (chr/css)85
, ,
Extreme Typography on the Web (djr/btc)84
A Reference Guide for Typography in Mobile Web Design (sma)83
, ,
Text Spacing Bookmarklet (ste)82
, , ,
Designing for Accessibility and Inclusion (sma)81
, , , , , , , , ,
Understanding Web Fonts and Getting the Most Out of Them (thi/css)80
, , ,
Universal Principles of User Experience Design (sma)79
, ,
Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility (bel/css)78
, , , , , ,
CSS Line Spacing: How to Set Line Spacing77
,
Web Typography: Designing Tables to Be Read, Not Looked At (ric/ali)76
, ,
CSS “font-display”: The Future of Font Rendering on the Web75
,
Improve Web Typography With CSS “font-size-adjust”74
,
Fluid Responsive Typography With CSS Poly Fluid Sizing (sma)73
, , ,
Typography Is Code (fra/btc)72
Typography on the Web Is Like Other Typography Only More Interesting (kup/btc)71
The 10 Big Web Design Trends of 201570
, , , , , , , ,
Space Yourself (mwi/sma)69
, ,
Typographic Units in CSS (joh)68
,
Type Is Visible Language (esp/btc)67
,
12 Little-Known CSS Facts (the Sequel) (lou)66
, , , , ,
Sass and Responsive Typography65
,
The Good, the Bad, and the Great Examples of Web Typography (sma)64
,
3 Principles for Perfect Typeface Pairing63
,
Font Hinting and the Future of Responsive Typography (nic/ali)62
,
A Critical Approach to Typefaces (sma)61
Typography 10160
,
CSS Baseline: The Good, the Bad, and the Ugly (sma)59
Why Won’t Helvetica Go Away? (sma)58
,
A Closer Look at Font Rendering (sma)57
,
CSS Tip: An “em” Isn’t an “m”, but an “ex” Is an “x”56
, ,
More Meaningful Typography (ali)55
Font Sizing With “rem” (jus)54
,
Technical Web Typography: Guidelines and Techniques (css/sma)53
, ,
Tracking—CSS “letter-spacing” and Where to Use It52
Typographic Effects in Canvas (dev)51
,
A Simpler Page (cra/ali)50
, , , ,
Readability: The Optimal Line Length49
,
Typography Is Not Your Brand, So Don’t Steal It (tim)48
,
Google Fonts Is Born—Can I Get a Hallelujah!? (mis)47
,
The Future of CSS Typography (sma)46
On Web Typography (jas/ali)45
, ,
W3C Cheatsheet (don/w3c)44
, , , , , ,
IKEA and the Font Fiasco43
,
How to Style Your Type With CSS42
Punctuation Cheat Sheet (j9t)41
,
Focus on Typography: Contrast40
,
Fuck the Foundries (div)39
8 Simple Typography Tips for Your Designs (sma)38
, ,
10 Principles of Readability and Web Typography (sma)37
, ,
In Defense of Readers (ali)36
, ,
8 Definitive Web Font Stacks35
Typographic Grid (chr/css)34
W3C Tackles Web Typography With CSS 3 (cms)33
, ,
Design Rants (dav)32
, , ,
Web Typography: Tell Me What You Want (jas)31
, ,
Which Are More Legible: Serif or Sans Serif Typefaces? (ale)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
, ,