Setting Web type to a baseline grid

Setting Web type to a baseline grid

Another article in Craig Grannell's fabulous series on design basics, in this article Craig gives us the lowdown on grid design basics - how to create a baseline grid in CSS, and how to position text on screen using it, with distances measured in both pixels and ems.

( Read the article )

I always try to set up my CSS like you described. I sometimes run into problems when I think the amount of whitespace after (of before) a certain element should vary depending on the following (or preceding) element. The most important example for me is a ul or ol, which I sometimes consider part of the previous paragraph and therefore don't want to be separated from it. I noticed it's very easy to break baseline grids when you start creating this kind of exceptions in your CSS.

it is easy to set up a baseline grid for block elements like headings and paragraphs, but it gets really messy with tables and forms. do you know any examples of anybody accomplished that?

"By setting the page’s overall font-size value to 62.5% in the body rule, text can be sized in ems using a value a tenth of the target pixel size."

I understand 1em equates to 10px, 2.4em equates to 24px but what is the reason for setting the body font to 62.5%?

logiclab "well most of the time"

It's a horrible shame to have a well known and otherwise competent web browser provider foster perpetuation of the rudeness that pervades the web.

Clagnut's 62.5% on body web sizing method is one of the worst things that ever happened to web users, though it pales in comparison to CSS, which, unlike <font>, which limits text undersizing to only a certain fraction smaller than the visitor's preference, permits unlimited disregard for visitor preferences.

For visitors, body {font-size: 100%} works better, because:
1-It respects visitors
2-Like the underlying byte-based foundation on which browsers and computers are built, the initial browser default setting of 16px is divisible by common fractions like 1/8 (.125, 2px assumed) & 1/4 (.25, 4px assumed) that less often produces visible rounding errors than does base 10 (neither 10 nor 16 being divisible evenly by 3).

Sizing web text in px is rude, plain and simple. Web pages don't need to look the same in every browser or on every viewing device. Pixel precision is contrary to the adaptability the web was intended to incorporate, and does when not inhibited by constricting CSS.

Designers have no idea what a visitor's display size, screen resolution, viewing distance, visual acuity or other local factors affecting appropriate text size are. These vary widely, and much more so than last century. Any modern presumption that anything other than 100% of the visitor's default text size is appropriate as a page's base text size is out of step with modern reality, rude, and unequivocally unnecessary.

It is _user agents_ that display web pages, not web designer agents. These user agents have a sophisticated ability to adapt, yet CSS and the designers using it invariably inhibit that adaptability, and are apparently unaware of the rudeness that that inhibition and disgregard for visitor preferences represents.

Text zoom, page zoom, and minimum font size are user agent defenses. Absent CSS offense on the part of designers, and the fostering of offense by those in positions of authority, users wouldn't need defenses. That browser users have and need them shows they are disrespected.