87: Web typography and PDFs

There are a couple of special characters: the “en dash” and
“apostrophe”. Small obsessive typography details I can’t let go of. :) I
mention them only because most people never notice those consciously.


While you have serif links underlined and blue (default), this is unnecessary Spartan design –even primitive. People know what looks like a text link and what doesn’t. That doesn’t mean the default circumstance doesn’t have value or merit. It does. The default is blatant and obvious linking when used. But there are things that are “wrong” with underlining and using colors that don’t match the theme. Underlining cuts through character descenders. That reduces legibility. And poor theming is bad for credibility. So I recommend styling with CSS rollovers. Be creative. That’s why they made CSS options available.

Watch the reverse type. It is not really “white”. It’s #dbdbdb on
#1c1c1c. This improves readability drastically onscreen. Try it and
compare to white-on-black for small type. Another subtly. Don’t use it
on your navigation. You need pure white contrast there because the
gradient background isn’t “solid color”.

Serif is a screen default –it was defaulted-in for browsers for the wrong reasons way back decades ago. There was a reason but it proved to be a bad choice with time. It’s not nearly as screen-readable as sans serif faces like the ubiquitous Verdana and Arial. Those fonts have interesting stories and histories but I won’t go into it now. I’m not anti-serif. It just needs to be used properly and in the right places. Some other day I’ll deliberate on all this “web typography”. I’ve used Verdana here, a Humanist font. The fallback stack would be Verdana, Arial, Helvetica, then sans serif. (That is not the ideal stack.) Verdana is on 99% of browsers. Linux not so good but still high 67%. And iOS 100%. Bonus.


There rarely is a benefit from images with baked-in built-type. I’ve learned that the hard way after spending too much of my work life in Photoshop building headlines.

PDF links need “editorialization”. This is good web etiquette. Dropping users into a download without warning or cuing is bad UX. It can lock up their browser. Very irritating. Especially if they are on dialup –like many in our rural area.

PDFs can easily be reduced with a freeware PDF optimizer to a tenth that file size. This is bandwidth politeness most developers don’t do for users. Apathy! Screen quality pages print just fine. Google on “freeware PDF optimizer”. There’s even one available for Ubuntu but I haven’t used it. The Mac one is drag-and-drop. Brainless. Nice.

Optimizing PDFs is a subtle way to say, “we care.” Host them on your server.

86: Dropdown CSS menus

I preach 7 to 9 links is the best-case requirement on a home page. So I choke on “link clutter”. That is frequently beyond a designers control since it’s probably edict from a committee.

I have low-expectations of dropdown and flyout navigation. I am prejudiced about dropdowns for various reasons. It is mostly a matter of preference and lack of tolerance on my part. Consider it a www personality disorder of hypersensitivity.

The responsivity of a CSS3 dropdown menu is “snappy”. This has pros and cons. Flashiness is one con. It can be somewhat distracting or surprising –like a winged bug jumping in your face. But I’d rather have a snappy responsive navigation than one that’s a slug.

A complaint with all dropdowns is what happens during accidental rollover like when accessing the browser back button. This is inherent in all dropdowns not just this one. So it’s irresolvably disturbing. I find it annoying on all sites. I am not a qualified person to judge the usability appropriateness. That is an endless debate on the web. I can say, “CSS3 cooks and looks good.” When there are too many links, dropdowns are the best game in town to compromise. Being weightless is the biggest coolness factor for me.