> Last few weeks I was picking up on the various articles I read > about grids and web typography and went on to create basis for all > future web sites I do. > It came up to this - a grid measured in ems + basics of typography > (headers, blockquotes, lists etc). > > http://aplus.co.yu/css/em-based-typographic-grid/ > > It's a work in progress and I would like to hear constructive > comments on it. > > Thanks > -- > AV
I have been working the past months on something very similar. The problems with an "all em approach" is that it is not very flexible (from a designers point of view) and that it can break in certain browsers when you (or the user) change the font-size. The main problem for me was re calculating everything as soon as I changed the base font size. Some will say a font-size of 12 is ideal whereas others claim you should not mess with the base font-size of 16. I found that 16px is actually the most flexible since it allows simple em calculations (conversion from px to ems will hardly ever exceed 4 decimal places ). But unfortunately sometimes you need 12 or even 10 or 14 px. Personally I find 12px too small to read and 16px too large. So I often use 14px. Which is a very difficult size when it comes to ems. The fact that the font-size is relative to the parents and that line-height is relative to the font-size is only convenient when working with inline stuff. When it comes to block-levels you need to redefine all the headers (h1-h6). Many a times I wished for a "setting" in css where I could make these relative to the p-element (or any other sibling for that matter). And then came the mater of borders. Sometimes I want headers to have a top and/or bottom border. As soon as that happens I need to re-calculate everything again. Which defies the purpose of having a template. So in the end, I just threw pixel-perfectness out the window and set all elements to a fixed em-size. This breaks the vertical rhythm but only by one or 2 pixels, which is not noticeable unless you show the lines on screen. In order to keep flexibility I kept the font-size of html and body to 100% and set the base font-size on the actual containing-div (for example #main-content, #header, #footer, etc.) And when I need a line-up in my vertical rhythm horizontally I just make sure I use a base font-size where the multiples of line-heights will line up naturally. (for example, 12px font has a line-height of 18, and 16px font a line-height of 24 so every 3rd line of 16px lines up with every 4th line of 12px (3x24=72 and 4x18=72). When I started out I wanted my grid to work 2 ways. Either in equal column widths or based on the golden ratio. This would work best with a base font-size of 12px (as opposed to 16px being best for maintaining a good vertical rhythm). So at this time I was wishing for relative units being relative to a base number I could set as constants (hope this will somehow find it's way in css3). Based on my work for the past 10 years I concluded that I don't need more than 4 columns for any design (and 4 was actually a one time exception). So I based my "template" on 2 columns with one div above and one div below which I can float so I can get 3 or 4 columns if needed. I size them in percentages with an overall minimum width of 700px (for screen styles). In theory percentages are a more reliable way of maintaining a layout since it can never exceed 100% of the viewport, whereas ems can if the UA rounds off wrongly. I say "in theory" because I found that IE does sometimes create computed values of more than 100% (nobody took the time to include a "if x > container% then x=container%"). Then I give the user the option of a high-contrast sheet where the font-size is 2.5 times as big. And I make sure that if the user sizes the font 3x in either sheet the layout doesn't break. During this time I was wishing for another feature in css; namely keeping aspect ratio in images, so I would only have to define one dimension (height or width). I keep all my pictures inside text a 5 line-height height in ems, which unfortunately I must recalculate if I want my pictures to have a border and/or a padding . Anyway, I am only trying to tell you the things I ran into. Not commenting on your design. I found that in the end, a template only works so far. Most of the times a design asks for things that cannot be captured in a "standard". I will keep checking on your progress as I am very interested to see how others overcome these issues. Bert ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
