0

I'm trying to do something that should be very simple but I've spent my day between failures and forums…

I would like to adjust my font in order to match my baseline. On InDesign it's one click but in CSS it looks like the most difficult thing on earth…

Lets take a simple example with rational values.

titles on grid

On this image I have a baseline every 20px.

So for my body I do:

body { font-size: 16px; line-height: 20px; }

Everything works perfectly. My paragraph matchs the baseline.

But when I'm scripting my h that doesn't match the baseline anymore…

body {font-size: 16px; line-height: 20px; }
h1 { font-size: 5em; line-height: 1.25em; }
h2 { font-size: 4em; line-height: 1.25em; }
h3 { font-size: 3em; line-height: 1.25em; }
h4 { font-size: 2em; line-height: 1.25em; }

P.S. 20 / 16 = 1.25em

In my inspector, computed returns the expected values:

h1 { font-size: 84px; line-height: 100px; }
h2 { font-size: 68px; line-height: 80px; }
h3 { font-size: 52px; line-height: 60px; }
h4 { font-size: 36px; line-height: 40px; }

As the line-height seems to be relative to the middle of the height of the letter my titles are not matching the bottom of my grid. I want to reach that kind of result:

enter image description here

Is there a way to achieve that without playing with padding and margin. I've made some tests but it is very messy. I'm looking for a clean way. I'm pretty sure we can do something in JavaScript..

Like 

var gap = height_of_the_line - height_of_the_font;
var bottom_gap = gap / 2;
var baseline = y * bottom_gap;

What do you thing? (I can't script JS, but issue like that give me the will to learn.)

Alessio Cantarella
  • 5,077
  • 3
  • 27
  • 34
  • what is "base-line"? and how is it shown on the page? – Ahmed Musallam Jan 25 '18 at 20:31
  • Can you create a simple example with html so we can run the code and see exactly what's going on – Huangism Jan 25 '18 at 20:52
  • Could it be the default margins applied to headings and p elements by the browser? – sol Jan 25 '18 at 20:55
  • I'm pretty you have found it already, but this article from Smashing Magazine is very well written and should guide you in the right direction: https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/ – Adriano Jan 28 '18 at 13:19

0 Answers0