Bolder Links
- Published on:
- Categories:
- Design 4, Typography 9, CSS 89
- Current music:
- Steve Pardo —
Wave Dancer
- Current drink:
- Thyme, rosemary & lemon infusion
This is another post about a small design tweak that I made around two years ago to both my blog and main website. I never shared it, because, well, it feels very small. But I liked it a lot, and I don’t think I could ever come back, so why not write about it?
The tweak is, you’ve guessed — make the font-weight of most links on my website bolder. That’s it, that is the crux of the change.
- This is a regular normal link, alongside some text.
- This is a nice, slightly bolder link, alongside some text.
- Regular bold link, alongside some text.
- This one maybe too bold, alongside some text.
I chose the 600 weight for my blog — slightly less than the default 700 for the bold keyword. And, for sure, not the boldest 900.
The small bump in weight gives links a tiny buff in contrast, while not making them stand out too much. One of the reasons I wanted to give them that bump in contrast is because I carefully chose the text color for both regular and visited links.
I wanted to keep a more vivid hue while not making it too dull, at the same time keeping enough contrast with both the page background, and the surrounding text. Even though I have underlines on my links, I dim them slightly, and having an extra affordance feels good in addition.
As I already mentioned, I kept this style for at least two years now, and I don’t think I would go back. I got used to it, and I like having this small barely noticeable tweak present in my blog and site’s designs.
I wonder if you ever, while visiting my websites, noticed this tiny aspect of it?