
Em Baseline Generator - jbrooksuk
http://joshnh.com/tools/em-baseline-generator.html
======
binarymax
This is very nice, but wondering if the em can be rounded a bit? I'm not sure
there's much difference between _1.5238095238095237em;_ and _1.524em;_

~~~
joshnh
Good call, I've fixed that.

~~~
mseebach
Same for line-height and margin-bottom?

------
Kiro
Why do I need to use em? I thought browsers handled things like zooming on
their own nowadays. What's wrong with px?

~~~
arianvanp
With em you define a base font-size in px. And then you express multiples of
the base in em, instead of multiplying manually

~~~
daigoba66
How is it different, better/worse, than expressing font sizes as percentage?

~~~
joe5150
Ems and percents behave differently when a user changes the browser's font
size setting (which I think you only see in IE now), but are otherwise the
same. Other than that the only advantage is in the fact that ems are a
standard convention for designers and typographers, who are used to expressing
measurements as a proportion of the text size, and "1 em" is just a more
concise representation of that measurement than "100% of the point size of the
font in use".

------
pasiaj
Excellent! You should also checkout <http://www.gridlover.net/>

------
exceptione
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/Typograph...](http://upload.wikimedia.org/wikipedia/commons/3/39/Typography_Line_Terms.svg)

~~~
joshnh
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-w...](http://joshnh.com/2012/10/12/how-does-line-height-actually-
work/)

~~~
exceptione
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
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
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 determ­ined by work­ing out the dif­fer­ence between the line-height
and the font-size, divid­ing by 2, and then pla­cing the cal­cu­lated amount
of space above and below each line of text."

~~~
joshnh
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.

------
lucisferre
Would be nice to have classes for the 6 font sizes as well. I typically don't
use H tags to control font size.

~~~
envex
Seems easy enough to just edit the generated code to add your classes.

Also, shouldn't you be using headlines when headlines should be used instead
of classes? Semantics and everything.

~~~
lucisferre
Sure but semantic importance doesn't necessarily need to have anything to do
with font sizing. It's also easy enough to generate the code myself, the point
of a generator would arguably have been to do that for me.

------
eoconnell
I prefer using rem over em. Em values multiply when nested where rem values do
not.

~~~
joshnh
I plan on having an option to output rem with px fallback code.

------
GhotiFish
Might I recommend lorem ipsum to paragraph. paragraph paragraph. paragraph. ?

It gives a more meaningful look at how a paragraph would actually look.

------
namuol
We require more Lorem.

------
GhotiFish
Another thing: When your reactive layout switches to a single column. Float
the sliders. so they're always visible.

Actually floating the sliders so they're always visible is probably a good
idea regardless of layout.

~~~
joshnh
What browser/OS? I can't replicate the issue you seem to be having.

