Should I replace the Arial font with something else for better small advertisement label clarity?

Question

Once again, I'm formatting ad spaces on my website to improve user experience. One thing that intrigues me is the font. For years, I've always stuck to the standard Arial font for all text on my webpages, but now I think for labeling ads, Arial doesn't cut it.

I have two color variants on my websites. One is where theres black text on an almost-white background, and the other is white text on a black background. The reason why I use the latter as well is because its primarily a picture viewer with options in white text since the focus is the picture.

Because my site is run with advertising and I deal with a host of screen sizes including small ones from mobile, I need to limit the real estate to ads, and using the Arial font at about 80% size increases the need for the height of those ads by at least 10 to 20%.

For compatibility reasons, I don't want to use CSS to load a random font from the web on the fly and make the browser use that. Instead I want to use a standard font better than Arial that all browsers will understand and that will stand out as clean white text on black. I'm thinking courier, but I'm unsure what is best.

The reason why I ask is because I want to limit the real estate given to the ad. I want to try to make the ad height total (including the label) less than 60 pixels high while having the word "advertisement" very visible to the almost-blindest person.

I can't ditch the label because I don't want to be in trouble for misleading labels.

Any suggestions?

Answer 1

Verdana was designed to be legible on display screens at small sizes and is widely installed. One feature of Verdana that might be disadvantageous is that the characters are wider (than Arial and Helv) which might result in more lines for that same text. (Font selection is fraught with tradeoffs.)

Verdana isn't on Android, there you're limited to Droid (on all versions) and Roboto (on newer versions). On Android you'd prefer the newer Roboto if it's there.

Another typeface to consider is Apple's new San Francisco font. This was also designed to be legible at small sizes (for the Apple watch).

In the interest of consistency (and good typography) I would go with the same font for the main text and the ads (in general you don't want 2 similar typefaces - you could have 2 dissimilar typefaces, a serif and a sans-serif for 2 different uses, but not 2 sans-serif typefaces).

So given what I know about your situation, the font stack I'd use is

font-family: "San Francisco Text", Verdana, Roboto, sans-serif;

This will give you San Francisco on all modern Apple devices, Verdana on just about everything else (except Android), Roboto on modern Androids, and the backstop is whatever sans-serif the OS likes (Droid on older Androids).