Bad rollovers

While we’re on the topic of bad Web typography, let me take a moment to complain about bad link styles.

It is possible, using CSS, to design a wide variety of typographical effects when it comes to Web links and what happens when the cursor rolls over them (referred to as a "rollover effect"). You can make it so the color changes, the font changes, underlines appear or disappear, bold is applied, or Italics, or a change in font face, among other things. While there may be some design advantages to using these effect (usability, aesthetics, etc.) please use good judgement when doing so. In particular, I advise strongly against making rollover effects that in any way changes the size or weight of the text characters.

For example, a color change, underline, or background color change does not affect the size or weight. Font changes, or the addition or removal of bold or Italics, do.

The problem with character size changes on rollovers is that when the effect occurs, everything under those characters is displaced, which can be a jarring and unattractive visual effect. It is annoying and amateurish, so don’t do it.

Below is an example from, taken from a page where they discuss the Iberian wine appellation of Valdepeñas. Note how rolling over a link causes the link text to switch to Italics, which causes an ugly ripple effect on the rest of the text. I gladly recommend wine from Valdepeñas, but this rollover effect is awful.

bad effect

2 thoughts on “Bad rollovers

  1. I long for the day when all browsers will have type rendering engines as slick as PDF or OS X’s system-level type rendering engine…is it time for the Adobe web browser?

    As a print guy, I wish I could do web layouts that auto-hyphenate, do proper justified text, and display with properly kerned, anti-aliased fonts.You could totally preserve standards-compliance and accessibility, even in liquid layouts, but a smart type engine depends on the browser, or to some extent, the OS.

    It would be nice if there was a universal way of supporting embedded fonts — right now we have several kludges ranging from proprietary Microsoft solutions (that no one uses) to good old Photoshop graphic text, to automatic, on-the-fly Flash text replacement (sIFR)

    A smart type engine wouldn’t let italic rollovers break your layout…it would just intelligently re-adjust the spacing to preserve the line breaks.

    Now can we move on to the true horrors of the web — sites that still use frames and Java applets for every little button on their site? And frickin’ mouse trails? What is WRONG with those people?!!!

  2. Wow, that’s a bad ‘un. Maybe it’s best appreciated after a few glasses of an Iberian Cabernet Sauvignon.

Comments are closed.