A talk by Pierrick Calvez. I especially like the part on the hyphen vs. en dash vs. em dash — the latter being a symbol which I use quite a lot — and the mentioning of keming 🙂 A Five-Minute Guide to Better Typography →
Tag Archives: typography
CSS leading-trim – The Future of Digital Typesetting
Ethan Wang, who works at Microsoft: In a standard text box, there’s almost always extra space above and below the actual text. Because of this, when you use a text box to measure and implement spacing, it ends up larger than you intended. The bigger the line height, the bigger the problem. You can see […]
Scunthorpe Sans 🗯🚫 profanity-blocking font
A s*** font that f***ing censors bad language automatically Some clever use of ligatures there 🙂 Scunthorpe Sans → Via Jeremey Related: keming, a new typographical term →
text-decoration-* CSS Properties Coming to Firefox
Glad to see this announcement by Mozillian Daniel Holbert: As of today (Sept 12 2019), I’ve turned on support for the CSS properties text-decoration-skip-ink, text-decoration-thickness, and text-underline-offset, on all platforms. As posted before, text-decoration-skip-ink gives you nicer underlines. The other two properties allow one to tweak the position and color of the underline. CSS Tricks […]
Controlling Hyphenation in CSS
Richard has done a nice writeup on hyphenation in CSS. Turns out we have some nice controls to tweaking how hyphenation on your site works: There is more to setting hyphenation than just turning on the hyphens. The CSS Text Module Level 4 has introduced the same kind of hyphenation controls provided in layout software […]
How one typeface took over movie posters
Interesting piece by Vox on the use of Trajan in movie poster design:
Hanging Punctuation in CSS
Using the hanging-punctuation CSS property it’s possible to control whether a punctuation mark should hang at the start or end of a line of text, so that they do not disrupt the ‘flow’ of a body of text or ‘break’ the margin of alignment. Here’s a pen: See the Pen mWJJNx by Joel Drapper (@joeldrapper) […]
Nicer CSS underlines with text-decoration-skip-ink: auto; (previously text-decoration-skip: ink;)
When applying text-decoration: underline; on an element, the line drawn will cross descenders. Using text-decoration-skip one can control the behavior of the underline The text-decoration-skip CSS property specifies what parts of the element’s content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also […]
Deep dive CSS: font metrics, line-height and vertical-align
Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline […]
Title Design: The Making of Movie Titles
Title designer Dan Perri explains how he designed movie titles for films such as “Star Wars,” “The Exorcist,” and “Raging Bull.”