I found some new things, some excellent reminders of old things, and confirmations of things I thought were good ideas. Here’s some stuff that stood out for me.
rems for global sizing (pages) and
ems for local sizing (components). I use
emalmost by reflex and have shied away from
rems for a while. I’m going to fix that.
- While it can be fun to set margins and paddings and use media queries and things to get a good measure (line length), sometimes just setting a
- The importance of using a typographic scale, especially one that’s relevant. This site uses an off-the-shelf scale. I plan to change that.
- I’ve not really used
min-heightmedia queries, but they’re useful for adjusting (or not adjusting)
min-heightof about half the
min-widthis a good guideline, given the widescreen proportions of many modern screens.
- Long strings of CAPS or numbers can sometimes do with about
- One thing that has stuck with me is a reminder that vertical-rhythm is not the same as a baseline grid. A baseline grid can be tricky to do on the web, but vertical rhythm is not. Having a system for using the multiples of line-height to space things properly is high up my To Do list.
- Choose odd over even grid systems. You’ll get consistency, but not monotony.
- A good set of characters for checking legibility is I1l0Oij (Eye one ell zero Oh eye jay). How do they look for you?
- Look for similar structure and form when comparing and combining typefaces: x-height; cap heights; ascenders; descenders; similar eaTgfM and GWy; contrast, colour, proporation; designer or foundry.
I also made a few immediate changes to the CSS of naga.co.za:
- added a bunch of hypenation (
hyphens: auto; hyphenate-limit-lines: 2; hyphenate-limit-chars: 6 3 2; hyphenate-limit-zone: 8%; hyphenate-limit-last: always)
blockquotesize to slightly smaller that body text, with no left margin;
- adjusted the margins around
ols for better alignment.
If you’ve read Web Typography, what were your take-aways?