Improve legibility and reduce layout shifts with x-height adjustments
The font-size CSS property sets the majuscule (“uppercase”) text size. The (font-)size-adjust property can set the minuscule (“lowercase”) size independently.
CSS
Samsung devices incorrectly handle CSS @media hover queries
The CSS @media hover query detects hover-capable input devices. Samsung touchscreens on Android gives unexpected results by pretending to be a computer touchpad.
Font-independent pixel-perfect negative CSS text-indents
There’s no need to guess the number of negative pixels for a text-indent to create a list item marker or hanging punctuation. Use this CSS technique instead!
Why HTML table cells won’t fit into your CSS baseline grid
Collapsed cell borders adds to the table cell’s line height. So, how do you align your table cells to a line-height/baseline based grid layout?
Improving the New York Times’ line wrap balancer
Web browsers don’t yet support (text-wrap: balance). Adobe and the NY Times have offer free JavaScript alternatives. I improved the latter to suit my needs.
The perfect cross-platform serif and sans-serif font stacks
How the default web browser fonts vary, why they are what they are, and how to make your webdesign look the same on different operating systems.
Everything you need to know about Night mode in Samsung Internet
Night mode in Samsung browser explained. How it breaks page contrast and accessibility, pastelify SVG colors, and why web developers can’t do anything about it.
Use an asterism for section breaks
Create section breaks with a <hr> element styled as a traditional asterism (⁂) symbol instead of a horizontal rule.