3 ms·

The letters are hanging in the air, i think a good demonstration would show the baseline of the letters to coincide with the line pattern! http://upload.wikime

The letters are hanging in the air, i think a good demonstration would show the baseline of the letters to coincide with the line pattern! http://upload.wikimedia.org/wikipedia/commons/3/39/Typography_Line_Terms.svg http://upload.wikimedia.org/wikipedia/commons/3/39/Typograph...

joshnh 14y ago
Hi, creator here. Unfortunately that's not how CSS works. See here for more information: http://joshnh.com/2012/10/12/how-does-line-height-actually-work/ http://joshnh.com/2012/10/12/how-does-line-height-actually-w...
- exceptione 14y ago
  I read your article. But i am still wondering why you cant shift the pattern so that the lines really line up with the baseline. You can influence the leading via margin or padding and the line-height property, right?
  - joshnh 14y ago
    Absolutely, you can hack it on a very individual basis, but this introduces some major problems. For instance, browsers and operating systems all render fonts differently, and as the web is fluid by nature, simply having a sentence break to the next line can be an issue. Also, it can be incredibly different based on the typefaces you are using.
    - exceptione 14y ago
      then i still don't get it. When a simple line break would break a horizontal baseline-aligned grid, wouldn't it break a horizontal baseline-plus-some-space-aligned grid? Although the css prop. "line-heigt" is not implemented in a convenient way, it is still deterministic as I understand from the quoted article: "This is determined by working out the difference between the line-height and the font-size, dividing by 2, and then placing the calculated amount of space above and below each line of text."
      - joshnh 14y ago
        Only if you are using line-height to hack together a print baseline on the web. Let me put it this way, if there was a semi-reasonable solution, I'm sure you would have heard about it.
cooop 14y ago
> The letters are hanging in the air, i think a good demonstration would show the baseline of the letters to coincide with the line pattern! Why? Like OP has demonstrated, this isn't how CSS works. To do so because this is how things are done in print is backwards. You could argue letters sitting on their baseline feels nicer to you, though I'd argue this was form over function. Nice work, OP.
- grey-area 14y ago
  Like OP has demonstrated, this isn't how CSS works. To do so because this is how things are done in print is backwards. You could argue letters sitting on their baseline feels nicer to you, though I'd argue this was form over function. This isn't a baseline - a typographic baseline aligns with the baseline of the letters because this is actually useful in design for example in order to line up pictures with the baseline. No-one said this 'feels nicer' it looks bad when pictures almost align but not quite with text, or when two columns of text don't align (check out CSS columns[1] for more examples of this lack of attention to typography in the spec messing up layout). If you call this a baseline, you'd probably steal sheep! [2] CSS was created without much reference to traditional typography, and thus makes it hard to do good designs with grids, baselines etc. This is a failing in the CSS spec, not something to be celebrated as the new ideal. There are entire frameworks out there trying to address all the failings of CSS when doing proper design (Bootstrap, Foundation etc all feature grids, something CSS is lacking). It's a shame the creators of CSS didn't consider more deeply the centuries of thought people have put into placing type on a page (or vellum, or a stone wall, or a poster, or a screen, or a phone, many of these rules apply to any medium in varying degrees). If they had we'd have avoided a lot of the hoops people have to jump through just to produce pleasing designs. I'm not clear why this grid is useful for web design, except perhaps as an illustration of another facet of CSS which is broken by design? Why would you want to align elements with the bottom of the line box as defined by CSS (which is usually invisible)? [1] http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/ http://zomigi.com/blog/deal-breaker-problems-with-css3-multi... [2] http://www.webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.7/ http://www.webtypography.net/Rhythm_and_Proportion/Horizonta...
  - 14y ago
ksherlock 14y ago
You could check out http://www.baselinecss.com http://www.baselinecss.com which uses a lineheight + top to push text down.

joshnh 14y ago

Hi, creator here. Unfortunately that's not how CSS works. See here for more information: http://joshnh.com/2012/10/12/how-does-line-height-actually-work/ http://joshnh.com/2012/10/12/how-does-line-height-actually-w...

exceptione 14y ago
I read your article. But i am still wondering why you cant shift the pattern so that the lines really line up with the baseline. You can influence the leading via margin or padding and the line-height property, right?
- joshnh 14y ago
  Absolutely, you can hack it on a very individual basis, but this introduces some major problems. For instance, browsers and operating systems all render fonts differently, and as the web is fluid by nature, simply having a sentence break to the next line can be an issue. Also, it can be incredibly different based on the typefaces you are using.
  - exceptione 14y ago
    then i still don't get it. When a simple line break would break a horizontal baseline-aligned grid, wouldn't it break a horizontal baseline-plus-some-space-aligned grid? Although the css prop. "line-heigt" is not implemented in a convenient way, it is still deterministic as I understand from the quoted article: "This is determined by working out the difference between the line-height and the font-size, dividing by 2, and then placing the calculated amount of space above and below each line of text."
    - joshnh 14y ago
      Only if you are using line-height to hack together a print baseline on the web. Let me put it this way, if there was a semi-reasonable solution, I'm sure you would have heard about it.

cooop 14y ago

> The letters are hanging in the air, i think a good demonstration would show the baseline of the letters to coincide with the line pattern! Why? Like OP has demonstrated, this isn't how CSS works. To do so because this is how things are done in print is backwards. You could argue letters sitting on their baseline feels nicer to you, though I'd argue this was form over function. Nice work, OP.

grey-area 14y ago
Like OP has demonstrated, this isn't how CSS works. To do so because this is how things are done in print is backwards. You could argue letters sitting on their baseline feels nicer to you, though I'd argue this was form over function. This isn't a baseline - a typographic baseline aligns with the baseline of the letters because this is actually useful in design for example in order to line up pictures with the baseline. No-one said this 'feels nicer' it looks bad when pictures almost align but not quite with text, or when two columns of text don't align (check out CSS columns[1] for more examples of this lack of attention to typography in the spec messing up layout). If you call this a baseline, you'd probably steal sheep! [2] CSS was created without much reference to traditional typography, and thus makes it hard to do good designs with grids, baselines etc. This is a failing in the CSS spec, not something to be celebrated as the new ideal. There are entire frameworks out there trying to address all the failings of CSS when doing proper design (Bootstrap, Foundation etc all feature grids, something CSS is lacking). It's a shame the creators of CSS didn't consider more deeply the centuries of thought people have put into placing type on a page (or vellum, or a stone wall, or a poster, or a screen, or a phone, many of these rules apply to any medium in varying degrees). If they had we'd have avoided a lot of the hoops people have to jump through just to produce pleasing designs. I'm not clear why this grid is useful for web design, except perhaps as an illustration of another facet of CSS which is broken by design? Why would you want to align elements with the bottom of the line box as defined by CSS (which is usually invisible)? [1] http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/ http://zomigi.com/blog/deal-breaker-problems-with-css3-multi... [2] http://www.webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.7/ http://www.webtypography.net/Rhythm_and_Proportion/Horizonta...
- 14y ago

ksherlock 14y ago

You could check out http://www.baselinecss.com http://www.baselinecss.com which uses a lineheight + top to push text down.