Tech does not just watch: Take action against Russia’s war on Ukraine 🇺🇦, and take action against Israel’s oppression and killing of Palestinians and the occupation and destruction of Palestine (history) 🇵🇸 Hide

Frontend Dogma

“typography” News Archive

Definition, related topics, and tag feed

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

Entry (Sources) and Other Related TopicsDate#
Solved by Modern CSS: Section Layout (sha)252
css, layout, grids, liquid-design
Compressed Fluid Typography (mat)251
css, liquid-design
Fluid Headings (don)250
headings, css, responsive-design
Testing Methods: Text Spacing (dec)249
accessibility, testing, wcag, readability
Design Can’t Rely on Logic: Troy Leinster on Type Design and Human Perception (int)248
podcasts, interviews, design, fonts
Visualizing Responsive Typography (mia/odd)247
css, responsive-design, functions
On Dashes, AI, and Screen Readers (ons/tpg)246
ai, screen-readers, accessibility
This One CSS Property Fixed My Font Headaches Forever245
css
Designing for User Font-Size and Zoom (mia/odd)244
design, zooming, css, units, functions
Setting Line Length in CSS (and Fitting Text to a Container) (dxn/css)243
css, units
It’s More Than Picking a Pretty Font (uxd)242
accessibility, fonts, legibility, readability, wcag
Font Size Dimensions (don)241
css, units
Why Fonts Look Better on macOS Than on Windows (uxd)240
fonts, readability, unix-like, apple, windows, microsoft, comparisons
A11y 101: 1.4.12 Text Spacing (nat)239
introductions, accessibility, wcag
Painting With the Web (mat/btc)238
videos, web, web-platform, design
Polishing Your Typography With Line Height Units (jen/web)237
css, units
Web Typography: A Refresher and History (zel)236
history, link-lists
“Pretty” Is in the Eye of the Beholder (geo/css)235
css, browsers, support, chrome, google, safari, apple
Thin Fonts Are a Usability Nightmare—and Finally, Designers Are Waking Up (web)234
fonts, usability, accessibility, design
Better Typography With “text-wrap: pretty” (jen/web)233
css, webkit, browser-engines, browsers, safari, apple
Mastering Typography in Design Systems With Semantic Tokens and Responsive Scaling (uxd)232
design-systems, design-tokens, semantics, responsive-design, scaling
Layered Text Headers (chr/fro)231
css, svg, shadows
Revisiting Fluid Type (ric+/odd)230
videos, interviews, fonts, responsive-design
Justified Text, JS “moveBefore” Method, Performance Optimization (zor/css)229
videos, css, javascript, performance, optimization
How to Use “attr()” in CSS for Columns, Colors, and Font-Size (chr/fro)228
how-tos, css, functions, layout, colors
The Hardest Working Font in Manhattan (mwi)227
fonts, history
Reimagining Fluid Typography (mia/odd)226
css, responsive-design, liquid-design
Better Text Rendering in Chromium-Based Browsers on Windows (pat/dev)225
rendering, browser-engines, browsers, chromium, windows, microsoft
Beware the Faux Bold (and How to Fix It) (ric)224
fonts, css
Change “font-weight” Based on the User’s Screen DPI223
css, pixel-density
Justified Text: Better Than Expected? (tyl/clo)222
css
CSS “text-box-trim” (arg/dev)221
css
Fabulous Font-Face Fallbacks (sto)220
performance, css, fonts
“text-box” (fon)219
css, spacing
CSS “margin-trim” and Line Height Units (jen/5t3)218
css, margins, units
CSS “text-wrap” (mey/5t3)217
css
What’s the Deal With WebKit Font Smoothing? (dbu)216
webkit, css
An HTML Email Template With Basic Typography and Dark/light Modes (chr/fro)215
templates, html, email, dark-mode
What Makes a Font Accessible? A Designer’s Guide (a11)214
guides, design, fonts, accessibility
Please, Don’t Use Viewport Units for Font Sizes (kev)213
videos, css, units
The Problem With Superscripts and Subscripts (ric)212
css
The Problem of the Em Square (uxd)211
design, history
Quick Guide to Web Typography for Developers (ole)210
guides, fonts, examples
Fluid Typography in Design Systems: From Design to Code (fel/uxd)209
design, design-systems, design-tokens
Mastering Typography in Logo Design (sma)208
design, images, logos
“font-size” Limbo (seb)207
design, css
Figma Typography Variables (fro)206
figma, variables
CSS “font-size-adjust” Is Now in Baseline (rac/dev)205
css, browsers, support, web-platform
Setting Up Typography Variables in Figma (uxd)204
figma, variables
Use of “ch” Unit Considered Inappropriate (in Certain Circumstances) (ric)203
css, units
Typographer vs. Accessibility (pim/btc)202
videos, accessibility
Typography Terms: Glossary (tbf/nng)201
terminology
Creating Fluid Typography With the CSS “clamp()” Function200
css, functions, liquid-design
Typography Variables in Figma Are Here199
variables, figma
The Basics of Legibility198
fundamentals, legibility
Hanging Punctuation in CSS (ada)197
css
Fluid Typography With Discrete Steps (css)196
css, tips-and-tricks
Spicing Up Text With “text-emphasis” in CSS (ami)195
css, effects
The Problem With Data Attributes for Text Effects (man)194
html, custom-data, css, effects
Retrofitting Fluid Typography (ric)193
liquid-design, css
Making the Most of Ligatures (man)192
css
Nicer Text Wrapping With CSS “text-wrap” (lon)191
css
The AI Dilemma in Graphic Design: Steering Towards Excellence in Typography and Beyond (sma)190
ai, design
The Most Accessible Font189
accessibility, legibility, fonts
The “hanging-punctuation” Property in CSS (chr)188
css
CSS “text-wrap: pretty” (arg/dev)187
css, browsers, google, chrome, support
When to Use CSS “text-wrap: balance;” vs. “text-wrap: pretty;” (sea)186
css, comparisons
The 3 Secrets to Font Pairing185
fonts, design
8 More Micro Tips for Remarkably Better Typography (uxd)184
tips-and-tricks, legibility, readability
Responsive Type Scales With Composable CSS Utilities183
css, responsive-design
WOFF Has Left the Building (mat)182
fonts, woff, css, support
8 Micro Tips for Remarkably Better Typography (uxd)181
tips-and-tricks, readability
Thinking on Ways to Solve Adaptive Typography (arg/dev)180
videos, css, fonts
Adapting Typography to User Preferences With CSS (arg/dev)179
css, customization
Fluid vs. Responsive Typography With CSS Clamp (its/log)178
css, functions, responsive-design
Figma Typography Secrets—Seven Pro Tips Revealed (pim)177
figma
90s Websites—Key Characteristics and Examples176
design, history, trends, navigation, colors
What’s Your Type? Try These Tests to Pick the Perfect Font for You (was)175
design, fonts
Mapping Typography (sco/9el)174
videos, css
Text Wrap Pretty Is Coming to CSS (ami)173
css
7 Practical CSS Typography Tips and Tricks (zor/css)172
videos, css, tips-and-tricks
Typography for Everyone (tob/btc)171
videos, fonts
Container Query Units and Fluid Typography (5t3)170
css, container-queries, liquid-design
CSS Text Balancing With “text-wrap: balance” (sha)169
css
The IL1 Typography Test (nng)168
videos, legibility, user-experience, testing
Preventing Too-Short Final Lines of Text Blocks (ric)167
css
Modern Font Stacks166
websites, fonts
16 Little UI Design Tips That Make a Big Impact165
design, tips-and-tricks, spacing, consistency, colors, contrast, fonts
An End to Typographic Widows on the Web (ric)164
css
Balanced Text Wrapping Is Coming to CSS (ami)163
css
Responsive Headlines Are About to Get Awesome (tyl/clo)162
css, headings, responsive-design
Improved Font Fallbacks (dev)161
fonts, graceful-degradation
How to Pick a Font (That Doesn’t Suck)160
how-tos, guides, fonts
Typography Manual159
code-pens
Typographic Hierarchy in Print, Web, and App Design (pim)158
design, hierarchy
Container Queries and Typography (fon)157
css, container-queries
On-Scroll Typography Animations (cod)156
animations
Greater Styling Control Over Type With “initial-letter” (sea)155
css
Quick Thoughts on Typeface and Font Accessibility154
accessibility, fonts
Fluid Typography: Predicting a Problem With Your User’s Zoom-In (sma)153
css, accessibility, zooming
An Ultimate Guide on Sizing, Spacing, Grids, and Layout in Web and UI/UX Design (sma)152
guides, spacing, grids, layout, design
How to Create Typography Guidelines for a Product That Does Not Follow a Design System (uxd)151
how-tos, design-systems
The Final Google Fonts Knowledge Drop of 2022 (ell)150
google, fonts
From Type to Logotype149
fonts, design, branding, logos
A Conversation With ChatGPT (mat)148
interviews, ai, chatgpt, design
Advanced Web Font Optimization Techniques147
fonts, optimization
How to Use Huge Type on the Web146
how-tos, design
CSS Ellipsis for Single-Line and Multi-Line Text145
css
Typographic Hierarchies (sma)144
design
Easy Fluid Typography With “clamp()” Using Sass Functions (uti/sma)143
liquid-design, css, sass, functions
This Site’s Type Is Now Variable (ell)142
fonts, variable-fonts, css
First Batch of Color Fonts Arrives on Google Fonts141
google, fonts, colors
CSS “line-height” (mar)140
css
Adventures in Text Rendering: Kerning and Glyph Atlases139
rendering, kerning
Typography in Web Design (uxm)138
design
The Right Space Around Headings in Web Typography (pim)137
spacing, headings
The Dos and Don’ts of Pairing Typefaces (nng)136
design, readability, legibility, usability
Measuring the Performance of Typefaces for Users II (sma)135
fonts, performance
Web Typography: Establishing a Strong Typographic System (mis)134
Measuring the Performance of Typefaces for Users (sma)133
fonts, performance
Tokens as Intents (don)132
design-tokens, naming
Legibility—How and Why Typography Affects Ease of Reading131
websites, books, legibility
Deep Dive Into Text Wrapping and Word Breaking (lon)130
css, deep-dives
Best Font for Online Reading: No Single Answer (nng)129
studies, research, fonts, readability
Fonts in Use: Variable Fonts128
fonts, variable-fonts
Variable Fonts in Real Life: How to Use and Love Them (rom+/evi)127
fonts, variable-fonts
Typography in Design Tokens for Figma and Code126
design-tokens, tooling, figma
Identifying Fonts: The Complete Guide125
guides, fonts
Don’t Believe the Type! (deq)124
videos, accessibility, readability, fonts
Minimizing Google Fonts by Only Loading It for Certain Characters (ami)123
google, fonts, performance, minimalism
Why You Should Use a Developer Font122
fonts, productivity
Modern Fluid Typography Using CSS Clamp (cod/sma)121
css, liquid-design
Styling Strategies Using Typography120
Consistent, Fluidly Scaling Type, and Spacing (bel/css)119
css, scaling, liquid-design
The Ideal Line Length and Line Height in Web Design (pim)118
design, readability
Google Fonts Knowledge (ell)117
google, fonts
What Creating a Simple Font Taught Me About Font Design (uxd)116
fonts
What’s the Right Font Size in Web Design? (pim)115
design
Line Length Revisited: Following the Research114
design, readability, research
Times New Roman Doesn’t Have to Be Boring—Here’s Why (uxd)113
fonts
All You Need Is 5 Fonts (uxd)112
design, fonts
Optical Size, the Hidden Superpower of Variable Fonts (pix)111
css, fonts, variable-fonts
Intrinsic Typography Is the Future of Styling Text on the Web (css)110
css
How I’m Dealing With Font Sizes (geo)109
css
Uniwidth Typefaces for Interface Design (uxd)108
fonts
Symbols to Copy107
tooling
CSS “min()”, “max()”, and “clamp()” (una/dev)106
css, functions
“font-kerning” (geo/css)105
css, kerning
Use Advanced Typography With Local Fonts (tom/dev)104
fonts, apis
The Thing With Leading in CSS (mat)103
css
“font-weight: 300” Considered Harmful (chr/css)102
css, legibility
Modern CSS Techniques to Improve Legibility (sma)101
css, techniques, legibility
“font-weight: 300” Considered Harmful (and a Fontconfig Workaround) (lis)100
css, legibility, unix-like
The Secret of Typography, Kerning, Explained for Dummies (uxd)99
kerning
How to Tame Line Height in CSS (css)98
how-tos, css
Accessible Font Sizing, Explained (css)97
accessibility, wcag, css, units
What Is Kerning? Here’s What You Need to Know96
kerning
How Do You Do “max-font-size” in CSS? (chr/css)95
css
How to Convert Variable TTF Font Files to WOFF2 (hen)94
how-tos, fonts, variable-fonts, woff, conversion
Dynamic Typography With Variable Fonts (btc)93
videos, fonts, variable-fonts
Design Principles for Developers: Processes and CSS Tips for Better Web Design (css)92
design, spacing, colors, principles, processes, css, tips-and-tricks
Typography for Developers (css)91
fonts, legibility, readability, css, link-lists
Six Tips for Better Web Typography (fon/css)90
design, tips-and-tricks
Colorful Typographic Experiments (chr/css)89
experiments, colors, css
Extreme Typography on the Web (djr/btc)88
videos
A Reference Guide for Typography in Mobile Web Design (sma)87
guides, terminology, mobile
Text Spacing Bookmarklet (ste)86
code-pens, bookmarklets, accessibility, wcag
Designing for Accessibility and Inclusion (sma)85
design, accessibility, dei, animations, colors, images, multimedia, keyboard-navigation, layout, readability
Understanding Web Fonts and Getting the Most Out of Them (thi/css)84
fonts, woff, css, variable-fonts
Universal Principles of User Experience Design (sma)83
user-experience, design, principles
Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility (bel/css)82
accessibility, semantics, contrast, colors, labels, forms, keyboard-navigation
CSS Line Spacing: How to Set Line Spacing81
how-tos, css
Web Typography: Designing Tables to Be Read, Not Looked At (ric/ali)80
readability, tables, responsive-design
CSS “font-display”: The Future of Font Rendering on the Web79
css, fonts
Improve Web Typography With CSS “font-size-adjust”78
css, optimization
Fluid Responsive Typography With CSS Poly Fluid Sizing (sma)77
responsive-design, liquid-design, css, sass
Typography Is Code (fra/btc)76
videos
Typography on the Web Is Like Other Typography Only More Interesting (kup/btc)75
videos
The 10 Big Web Design Trends of 201574
design, layout, trends, minimalism, scrolling, flat-design, animations, colors, backgrounds
Space Yourself (mwi/sma)73
whitespace, css, unicode
Typographic Units in CSS (joh)72
css, units
Type Is Visible Language (esp/btc)71
videos, fonts
12 Little-Known CSS Facts (the Sequel) (lou)70
css, borders, tables, naming, animations, selectors
Sass and Responsive Typography69
sass, responsive-design
The Good, the Bad, and the Great Examples of Web Typography (sma)68
fonts, examples
3 Principles for Perfect Typeface Pairing67
fonts, principles
Font Hinting and the Future of Responsive Typography (nic/ali)66
fonts, responsive-design
A Critical Approach to Typefaces (sma)65
fonts
Typography 10164
introductions, terminology
CSS Baseline: The Good, the Bad, and the Ugly (sma)63
css
Why Won’t Helvetica Go Away? (sma)62
fonts, history
A Closer Look at Font Rendering (sma)61
fonts, rendering
CSS Tip: An “em” Isn’t an “m”, but an “ex” Is an “x”60
css, units, tips-and-tricks
More Meaningful Typography (ali)59
css
Font Sizing With “rem” (jus)58
css, units
Technical Web Typography: Guidelines and Techniques (css/sma)57
css, guidelines, techniques
Tracking—CSS “letter-spacing” and Where to Use It56
css
Typographic Effects in Canvas (dev)55
canvas, javascript
A Simpler Page (cra/ali)54
design, readability, html, css, simplicity
Readability: The Optimal Line Length53
readability, usability
Typography Is Not Your Brand, So Don’t Steal It (tim)52
branding, design
“text-rendering: optimizeLegibility;” // Can You Read Me Now? (dal/aja)51
css, legibility
Google Fonts Is Born—Can I Get a Hallelujah!? (mis)50
google, fonts
The Future of CSS Typography (sma)49
css
On Web Typography (jas/ali)48
fonts, legibility, readability
W3C Cheatsheet (don/w3c)47
cheat-sheets, documentation, css, html, svg, accessibility, internationalization
IKEA and the Font Fiasco46
fonts, case-studies
How to Style Your Type With CSS45
css
Punctuation Cheat Sheet (j9t)44
localization, cheat-sheets
Focus on Typography: Contrast43
contrast, colors
Fuck the Foundries (div)42
fonts
8 Simple Typography Tips for Your Designs (sma)41
design, css, tips-and-tricks
10 Principles of Readability and Web Typography (sma)40
design, readability, principles
In Defense of Readers (ali)39
content, writing, readability
8 Definitive Web Font Stacks38
fonts
Typographic Grid (chr/css)37
grids
W3C Tackles Web Typography With CSS 3 (cms)36
w3c, css, standards
Design Rants (dav)35
design, readability, responsive-design, semantics
Web Typography: Tell Me What You Want (jas)34
w3c, fonts, css
Which Are More Legible: Serif or Sans Serif Typefaces? (ale)33
fonts, legibility, studies, research
The Principles of Beautiful Typography (jas)32
principles, fonts, readability, legibility
Understanding Web Design (zel/ali)31
design
How to Size Text in CSS (ric/ali)30
how-tos, css, resizing, browsers, apple, safari
Blueprint CSS Framework: Typography Matters (dal/aja)29
blueprint
Compose to a Vertical Rhythm (ric/24w)28
css, headings
The Elements of Typographic Style Applied to the Web (ric)27
websites, guides
Five Simple Steps to Better Typography (mar)26
Origins of Verdana/Tahoma (dav)25
fonts
Let Users Control Font Size (nng)24
usability, customization, readability
Reading Design (ali)23
design, content, readability
Typography Matters (kis/ali)22
content, readability
The Trouble With “em” ’n “en” (and Other Shady Characters) (ali)21
html, unicode, character-references
CSS Design: Size Matters (ali)20
css, browsers, netscape, microsoft, internet-explorer, support
Collecting Your Font Styles19
css
Fallback Font Generator (scr)18
tools, exploration, fonts, code-generation
Google Web Fonts Helper17
tools, exploration, code-generation, google, fonts
Fluid Type Scale Generator (Aleksandr Hovhannisyan) (ale)16
tools, exploration, code-generation
Web Font Generator15
tools, exploration, fonts
Type Scale Generator (Tim Brown) (tim)14
tools, exploration, code-generation
Type Scale Generator (Jeremy Church)13
tools, exploration, code-generation
Text Decoration Generator12
tools, exploration, decoration
Golden Ratio Typography Calculator11
tools, exploration
Font Tester10
tools, exploration, fonts
Font Style Matcher9
tools, exploration, fonts, css
Font Pairing Generator8
tools, exploration, fonts, comparisons
Font Family Support Checker (zac)7
tools, exploration, fonts, support
Font Determiner6
tools, exploration, fonts
Font Comparer5
tools, exploration, fonts, comparisons
Font Capability Checker (pix)4
tools, exploration, fonts
Fluid Type Scale Generator (Marc-Aurele Legoux)3
tools, exploration, code-generation
CSS Fluid Typography Generator (cod)2
tools, exploration, code-generation, css, liquid-design
Cap Sizer1
tools, exploration, code-generation