4 ms·

I like the fact that more people are trying to incorporate baselines into their grid. This is another one I found (http://baselinecss.com/ http://baselinecss.co

I like the fact that more people are trying to incorporate baselines into their grid. This is another one I found (http://baselinecss.com/ http://baselinecss.com/) but I much prefer the one in the OP.

stephencelis 16y ago
Baselines are a very nice touch, but always use judgement and don't be afraid to step out of those guidelines (or adjust the design) when you need to. The Baseline homepage is generally aesthetically pleasing, but goes a bit overboard: the top-right introductory text sticks out sorely with its font size : line height ratio.
- jamesteow 16y ago
  True. I mean, on the startup I'm working on (http://www.votereports.org http://www.votereports.org), I threw away baselines on the instructional area largely because I wanted to make the page seem more dynamic and very different from rigid designs I've seen other people do. Baselines traditionally make a lot more sense in print design (especially books). But it's nice to have this option on the web.
edanm 16y ago
I've never heard the term "baseline". Would you mind explaining what that means?
- jamesteow 16y ago
  Baseline is where the bottom of a text character sits. Sidenote: Parts of a character that descends past the baseline (characters: y, p, q, j) are called descenders. In graphic design, baselines are used to align content in different columns so that they line up with one another. For example, if you read a magazine article and see two columns side by side, they should share the same baselines. This is especially useful when you have elements that make columns shift positioning. Let's say on one column you have some text and on the other, you have an image that pushes down the second column. How do you align the second column? Most people would just look at the padding between the image and the second column of text when in reality, it's probably best to also look at whether or not it's sharing the same baseline as the first column.
nsfmc 16y ago
So, this is a neat idea, but the way css is designed (i.e. half-leading model) makes generalized baseline alignments completely horrid because you end up doing all these positioning gimmicks based on the exact descender depth of the font you're using. At that point, you're really designing for the font which sort of defeats the generality/convenience of css. I don't think at the time it was designed there was a sense that anybody would actually want features like actual baseline alignment (i mean, look at the extent of UILabel's typography options for a good example of this sort of present-day rationalization) I've nearly given up on having any semblance of generalized baseline alignment in css like i do in, say, indesign, which although horrid, at least got that part right. That said, if you want a good argument against a strict baseline grid i'll supply one and a half: derek birdsall1's notes on book design[1] and mine: When i started working through my mfa i had completely drunk the grid kool-aid from Samsara, Elam, Bringhurst and (natürlich) Müller-B. I was obsessed with vertical grids and i used them much to my detriment (because i was blindly plugging away). My shit looked mechanical which is not really me at all. Then i met another designer who said, in passing: "who really uses grids? You make shit look good. When you're done, you tidy it up with a grid if the spirit moves you.* It'll probably already be on some grid, everyone's brain does that, and your post-rationalized grid's practically ready-made. how cool is that?"* Now, this sort of presumes you can make shit look good which is a tall order, but really it means following your gut and possibly using a grid to keep it in check. If you start with a fixed grid, you limit many of your options from the outset because you're trying to fit stuff into these little squares. Of course, this takes lots of practice. Practically speaking, grids take much of the choice out of things. If you need to make something that looks cool fast, rip one out of Müller-B and plug away. It will look awesome. Otherwise, loosen up, have some brown liquor and design away until you're happy or trashed or both. [1]: http://yalepress.yale.edu/yupbooks/book.asp?isbn=9780300103472 http://yalepress.yale.edu/yupbooks/book.asp?isbn=97803001034...
- jamesteow 16y ago
  I think for a general designer, using a grid is probably the best method because... it takes a lot of skill to actually break the grid in a method that is still readable yet a well-styled execution. I definitely upvote the notion that using a very fixed grid limits options, especially if one is also working with a vertically fixed grid. If I think about the most memorable websites, they usually break the grid. In many ways, you've actually convinced me not to use this grid.

stephencelis 16y ago

Baselines are a very nice touch, but always use judgement and don't be afraid to step out of those guidelines (or adjust the design) when you need to. The Baseline homepage is generally aesthetically pleasing, but goes a bit overboard: the top-right introductory text sticks out sorely with its font size : line height ratio.

jamesteow 16y ago
True. I mean, on the startup I'm working on (http://www.votereports.org http://www.votereports.org), I threw away baselines on the instructional area largely because I wanted to make the page seem more dynamic and very different from rigid designs I've seen other people do. Baselines traditionally make a lot more sense in print design (especially books). But it's nice to have this option on the web.

edanm 16y ago

I've never heard the term "baseline". Would you mind explaining what that means?

jamesteow 16y ago
Baseline is where the bottom of a text character sits. Sidenote: Parts of a character that descends past the baseline (characters: y, p, q, j) are called descenders. In graphic design, baselines are used to align content in different columns so that they line up with one another. For example, if you read a magazine article and see two columns side by side, they should share the same baselines. This is especially useful when you have elements that make columns shift positioning. Let's say on one column you have some text and on the other, you have an image that pushes down the second column. How do you align the second column? Most people would just look at the padding between the image and the second column of text when in reality, it's probably best to also look at whether or not it's sharing the same baseline as the first column.

nsfmc 16y ago

So, this is a neat idea, but the way css is designed (i.e. half-leading model) makes generalized baseline alignments completely horrid because you end up doing all these positioning gimmicks based on the exact descender depth of the font you're using. At that point, you're really designing for the font which sort of defeats the generality/convenience of css. I don't think at the time it was designed there was a sense that anybody would actually want features like actual baseline alignment (i mean, look at the extent of UILabel's typography options for a good example of this sort of present-day rationalization) I've nearly given up on having any semblance of generalized baseline alignment in css like i do in, say, indesign, which although horrid, at least got that part right. That said, if you want a good argument against a strict baseline grid i'll supply one and a half: derek birdsall1's notes on book design[1] and mine: When i started working through my mfa i had completely drunk the grid kool-aid from Samsara, Elam, Bringhurst and (natürlich) Müller-B. I was obsessed with vertical grids and i used them much to my detriment (because i was blindly plugging away). My shit looked mechanical which is not really me at all. Then i met another designer who said, in passing: "who really uses grids? You make shit look good. When you're done, you tidy it up with a grid if the spirit moves you.* It'll probably already be on some grid, everyone's brain does that, and your post-rationalized grid's practically ready-made. how cool is that?"* Now, this sort of presumes you can make shit look good which is a tall order, but really it means following your gut and possibly using a grid to keep it in check. If you start with a fixed grid, you limit many of your options from the outset because you're trying to fit stuff into these little squares. Of course, this takes lots of practice. Practically speaking, grids take much of the choice out of things. If you need to make something that looks cool fast, rip one out of Müller-B and plug away. It will look awesome. Otherwise, loosen up, have some brown liquor and design away until you're happy or trashed or both. [1]: http://yalepress.yale.edu/yupbooks/book.asp?isbn=9780300103472 http://yalepress.yale.edu/yupbooks/book.asp?isbn=97803001034...

jamesteow 16y ago
I think for a general designer, using a grid is probably the best method because... it takes a lot of skill to actually break the grid in a method that is still readable yet a well-styled execution. I definitely upvote the notion that using a very fixed grid limits options, especially if one is also working with a vertically fixed grid. If I think about the most memorable websites, they usually break the grid. In many ways, you've actually convinced me not to use this grid.