..baseline.. (Red lines unaligned on Chrome. Read below for more, watch in Firefox to see it correctly)

# Final version of my Typography Experiments

There has been a lot of discussion about fluid typography in 2016.

I wanted to create a fluid typography system, while being in control of vertical-rhythm and type-scale.

The resources I read about vertical-rhythm ( here and here ) all started with a base font-size in px.

My curiosity was if it was possible to take advantage of css variables and the em and rem unit and create a dynamic system wich kept everything correctly aligned.

## The Journey

After some experimentation, I was about to give up.

Everytime I added the next step, everything broke down and was out of alignment. I was able to align the first H1, but then the H2 was out of place, and so on.

Until I discovered that it was a problem with the background rendering of Chrome (more on it in the next section).

When I realized that, I thought at all the times I could actually had it right before, and never notice. So I decided to start my work from the beginning and do it step by step, everytime on a different pen.

So if you want to understand the process who led to this page follow the steps:

- Step 1
- Step 2
- Step 3
- Step 4

(warning: full of typos)

### Chrome problem

The problem I encounter with Chrome (which made me waste at least a full day) is badly described in step 2 .

What happens is that the rendering of the background lines seems to happen at discrete interval. So there is a mismatch between the line-height of the text and the height of the lines.

Since I was using the lines to check the alignment, I thought that all the formulas I was trying were wrong. Bummer.

If any of you have any insight on the problem, pleas share your ideas with me on twitter (@psylok)

#### What to do from here

As of now, this demo is limited to p and h?.

As long as we give every object a line height which is multiple of the base one, the system should work with everything else (as it does with the link list above).

One problem that I can anticipate, is the margin-collapse.

When adding the line-skip to the paragraph, I initially added it both on margin-top and margin-bottom, cause they will collapse anyway right? They do. But not in the way I hoped.

In the normal flow, margin-bottom is negative, so when it collapse with the positive margin-top of the following line, it get subtracted. Which is what we wanted. Instad, if we add a line-skip, the margin-bottom become positive, and when two positive margin collapse, the bigger wins. So we lose the negative adjustment that we do.

At this level I do not consider these problems in depth, but I am sure that with the use of sibling-selector, first-of-kind, and similar selectors they can be avoided.

##### That's all folks!

I haven't much to add. But any kind of feedback will be appreciated, since I invested quite a bit of time on this experimentations. So here we go with the last of the headers, an H6.

###### Sixth level Heading

There you go. Done. Here a sample of all the header next to each other, to test the visual effect of the scale-up variable you can set in the code. Try to change that and look at the differences. For more information try type-scale

# Four word long Title