A rather geeky/technical weblog, est. 2001, by Bramus
A common thing to do regarding font-sizing is to use Viewport Unit Based Typography, nowadays often combined with CSS min() or clamp(): :root { font-size: min(calc(1em + 1vw), 4em); } However, as Sara Soueidan details, Safari doesn’t co-operate here: In Safari on macOS, the fluid text wasn’t really fluid—resizing the viewport did nothing to the …
Continue reading “Viewport Unit Based Typography vs. Safari”
At first sight the new visual identity for the San Francisco Symphony (pictured below, on the right) looks a bit off … Those letters sure look a bit oddly sized, no? Turns out there’s a dynamic drive behind them: Leveraging new creative technology including variable font design, our new visual language (of which the logo …
Continue reading “SYMPHOSIZER – Playing with SF Symphony’s new Visual Identity”
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 →
leading-trim – The Future of Digital TypesettingEthan 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 …
Continue reading “CSS leading-trim – The Future of Digital Typesetting”
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 FirefoxGlad 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 …
Continue reading “text-decoration-* CSS Properties Coming to Firefox”
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 …
Interesting piece by Vox on the use of Trajan in movie poster design:
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) …
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 …