Mandy’s experiments with text effects in CSS are kinda mindblowing—I can’t wait to see her at Ampersand at the end of the month!
Here’s a little snippet of CSS that solves a problem I’ve never considered:
The problem is that Live Text, “Select text in images to copy or take action,” is enabled by default on iOS devices (Settings → General → Language & Region), which can interfere with the contextual menu in Safari. Pressing down on the above link may select the text inside the image instead of selecting the link URL.
- Start with the text
- Use size intentionally
- Contrast weights and styles
- Play with spacing
- Use colour, but don’t rely on it
- Limit your font choices (but choose well and wisely)
- Repeat, repeat, repeat
- Test your system
Adam makes a very good point here: the term “vertical rhythm” is quite chauvanistic, unconciously defaulting to top-to-bottom writing modes; the term “logical rhythm” is more universal (and scalable).
Ahmad runs through some of the scenarios where text-wrap: balance could be handy.
Even though it’s not well-supported yet in browsers, there’s no reason not to start adding it to sites now; it’s classic progressive enhancement.
How do we write, design, and code a link that works for everyone on every device? Let’s dive into the world of creating the perfect link, without making a pig’s breakfast of it.
Had you heard of these bits of CSS? Me too/neither!
If the JavaScript API requires a user gesture, maybe it’s time for a new button type.
How to make the distance of link underlines proportional to the line height of the text.
Make your links beautiful and accessible.
Some styles I re-use when I’m programming with CSS.