This link has been bookmarked by 364 people . It was first bookmarked on 10 Apr 2007, by Laura.
-
22 Jan 13
-
25 Oct 12
-
05 Sep 12
-
Setting Type on the Web to a Baseline Grid
-
Setting Type on the Web to a Baseline Grid
-
a toolkit
-
We can apply the same principles of proportion and balance to the type within those columns by borrowing another technique from our print brethren: the baseline grid.
-
main principle of the baseline grid is that the bottom of every line of text (the baseline) falls on a vertical grid set in even increments all the way down the page.
-
The magical end result is that all the text on your page lines up across all the columns, creating a harmonious vertical rhythm.
-
In print, it’s not that hard. Just enable the baseline grid in Quark or InDesign and set the increment based on the line-height you want. On the web of course, it’s another story. It’s hard enough to align things vertically with CSS because it’s tough to predict where every element will fall, and it only gets worse when we’re dealing with type, which is hard enough to size consistently on its own. But with a little math and a slightly obsessive attention to detail, we can make it work.
-
The first thing we have to do is set a line-height for our grid. I’ve chosen a pretty standard base font size of 12 pixels, and set the line-height at 18 pixels, which gives us a nice open leading of about 150%.
-
I’ve also borrowed a trick from Khoi and created a tiling background image that I can use on the page while I’m working to make sure everything lines up where I want it to.
-
Paragraphs and headers
-
I'll start by resetting the margin and padding on everything to zero so we don’t have to worry about default browser styles.
-
In practice, you'll probably want to use something a little more precise,
-
Lists
-
Lists are a little bit tougher. We’re used to adding a little padding between each list item and before or after a nested list.
-
-
11 Jun 12
-
15 Mar 12
-
01 Mar 12
-
10 Jan 12
Bert Deckers"The main principle of the baseline grid is that the bottom of every line of text (the baseline) falls on a vertical grid set in even increments all the way down the page. Imagine those old Big Chief ruled writing pads they gave you in grade school to practice penmanship and you’ve got the basic idea. The magical end result is that all the text on your page lines up across all the columns, creating a harmonious vertical rhythm."
grid webdesign webdev css js jquery layout design typography web workflow html html5 baseline vertical ala alistapart
-
08 Dec 11
-
06 Dec 11
-
13 Oct 11
-
28 Sep 11
-
08 Sep 11
-
18 Aug 11
-
15 Aug 11
-
14 Jul 11
-
08 Jul 11
-
05 Jun 11
-
baseline grid
-
the bottom of every line of text (the baseline) falls on a vertical grid set in even increments all the way down the page.
-
Because of the way CSS renders line-height (by adding space above and below the letters) it’s a lot easier to line the text up within the grid lines rather than directly on them
-
Paragraphs and headers
-
start by resetting the margin and padding
-
Any time you add vertical space with a margin or padding, you need to add it in units of 18 pixels to maintain the baseline grid
-
Lists
-
you may have to choose between adding a lot of extra space (adding a full grid line) or adding none at all and letting list items fall on the regular grid lines.
-
it’s possible to add half of your line-height (in this case, 9 pixels) of margin above and below nested lists
-
Floats and sidebars
-
Images and other elements floated within your text need to be sized vertically in multiples of your grid increment
-
you can add margins around them that add up vertically to a multiple of 18
-
callout boxes are a little bit more complicated, since it’s harder to predict their height based on the content inside
-
All your baseline are belong to us
-
Don’t fear the pixel
-
we have to strike a balance between creating pixel-perfect layouts and infinitely flexible ones
-
Ideally it’s something that should be provided by the browser, no matter how the page is built, and in modern browsers it is.
-
-
21 Jan 11
-
13 Jan 11
-
23 Dec 10
-
14 Dec 10
-
24 Nov 10
-
14 Oct 10
-
21 Sep 10
-
14 Sep 10
-
04 Aug 10
-
03 Aug 10
-
26 Jul 10
-
15 Jun 10
-
01 May 10
-
29 Apr 10
-
26 Apr 10
-
23 Apr 10
-
22 Apr 10
ashaszin AmselCréation d'une baseline en utilisant des tailles en px.
css web typography typographie font fonts reference design webdev xhtml webdesign delicious
-
15 Apr 10
-
31 Mar 10
-
18 Mar 10
-
11 Mar 10
-
28 Feb 10
-
11 Feb 10
-
08 Feb 10
-
29 Jan 10
-
17 Jan 10
-
09 Jan 10
-
26 Nov 09
-
09 Nov 09
-
31 Oct 09
-
31 Aug 09
javier ramirezpresentación del concepto de baseline en a list apart
-
27 Aug 09
-
24 Aug 09
-
06 Aug 09
-
02 Aug 09
-
08 Jul 09
-
07 Jul 09
-
13 Jun 09
-
15 May 09
-
13 May 09
Ady GouldWe web designers get excited about the littlest things. Our friends in the print world must get a kick out of watching us talk about finally being able to achieve layouts on the web that they’ve taken for granted for years. Let’s face it: it’s easier these days to embed a video on the web than it is to set type consistently or align elements to a universal grid. But we’re scrappy folks, web designers. We don’t give up easy. In the long slow battle with browser support and platform inconsistencies, we’ve been able to bring more and more sophisticated print techniques onto the web—sometimes kicking and screaming.
-
04 May 09
-
03 May 09
-
27 Apr 09
-
20 Apr 09
-
12 Apr 09
-
03 Apr 09
-
22 Mar 09
-
19 Mar 09
-
06 Mar 09
-
03 Mar 09
-
The main principle of the baseline grid is that the bottom of every line of text (the baseline) falls on a vertical grid set in even increments all the way down the page.
-
You’ll notice in the previous example that the text doesn’t fall directly on the grid lines. Because of the way CSS renders line-height (by adding space above and below the letters)
-
-
28 Feb 09
-
18 Feb 09
-
13 Feb 09
-
10 Feb 09
Dave McNallyA great tutorial on baseline grids by Wilson Miner
-
amit_ehalf of your line-height (in this case, 9 pixels) of margin above and below nested lists. Adding half a line to the top and another half to the bottom means the contents of the list will be “off the grid,” but the grid will get back on track once the list
-
31 Dec 08
-
29 Dec 08
-
19 Dec 08
-
12 Dec 08
-
11 Dec 08
-
10 Dec 08
-
04 Dec 08
-
02 Dec 08
-
01 Dec 08
-
24 Nov 08
-
19 Nov 08
-
13 Nov 08
-
01 Nov 08
-
31 Oct 08
-
25 Oct 08
bharath kumarWilson Miner’s A List Apart article Setting Type on the Web to a Baseline Grid, a well-written, concise, and complete description of how to achieve a consistent baseline grid on the Web.
-
23 Oct 08
-
06 Oct 08
-
18 Sep 08
-
17 Sep 08
-
10 Sep 08
-
25 Aug 08
-
06 Aug 08
Page Comments
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.