Em Baseline Generator

[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.

[Kiro]

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

[joshnh]

Ems are more versatile. When increasing the size of all fonts at a particular breakpoint for instance. Instead of having to adjust each font-size property individually you can simply change the font-size of the root element.

[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

[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...

[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...

[cooop]

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

[ksherlock]

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

[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.

[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.