Scalable Mini Tabs

Previous to this week, the mini tabs that power this site’s navigation used a fixed pixel font-size. It’s been something that has always bothered me (there could be worse things). So, in an effort to try to use relative font sizing as much as possible going forward, I thought I’d revisit the way the tabs were styled.
closeup of navigationIt only took a little tweaking, and now the navigation scales perfectly if the user bumps up the text size a few notches. I’ve updated the mini tabs example page by adding the relative font-size version for those that are currently using this method — but now would like the text to be scalable. The new method continues to use a single unordered list.
It turned out so well, that I finally went ahead and switched the entire site over to use relative font-sizes (using keywords in this case).
I settled on assigning a base keyword font-size of small on the <body> element, then using percentages for everything below. What was interesting was the differences in say, a value of 85% across all browsers using default settings. Some interpretations would be noticably different — but by experimenting with in-between values like 82%, some browsers appear to “round up” to the nearest 5 or 10 multiple, while others would accept the value. This turned out to be a good thing — tweaking the percentage values to get the text to appear at least similar across the board when viewed with default settings.
It’s impossible (and useless) of course to get it precisely consistent — because that’s not the promise of relative font sizing. Heck, isn’t that what pixels are for? ;-) But it’s nice to think that, if the user wanted to, they could increase the text for the entire page and still absorb the design as intended.