DEV Community

Discussion on: Generating `font-size` CSS Rules and Creating a Fluid Type Scale

Collapse
 
dlewand691 profile image
Daniel Lewandowski • Edited

Hi Stephanie! Thanks so very much for this article, it's helped quite a lot. I have one question/clarification/point of confusion though...

Using your final Codepen demo and adding h5 or h6 or both, the other headings become nearly identical in size at smaller viewport widths. See the h2 and h3 sizes:

See the h2 and h3 sizes

Why is this?
Is this expected?
Is there a way to avoid this?

Here's my updated pen where you can see this in action: codepen.io/danlewski/pen/zYZNoWP
(Please suggest how I can clean up my JS too, if you don't mind, I'm a noob when it comes to that stuff but trying to learn more.)

As a side-note, I've been using this technique from Fred Simmons with a lot of success: gist.github.com/fsimmons/e9e64dc2f...

It allows you to make any attribute fluid and I haven't found any drawbacks from it yet.

Thanks and really look forward to hearing back!
~Danny