I have a design that is made in Canva.com which I'm trying to convert to HTML, CSS document. In Canva texts have different sizes like 12, 42 etc. (I'm not sure if those are pixels). What I'm trying to do here is making the page responsive (which would resize texts when screen is smaller) and sizing texts not relative to other elements (maybe their parent element).

Let's say I have two text elements and I want to size them accordingly:

Text A = 12 Canva text size unit Text B = 24 Canva text size unit

I want to size Text B accordingly so it would look two times bigger than Text A.

If I use font-size: 1.2em for Text A, and font-size: 2.4em for Text B. Would it make things look as I expected them to be? So, is 1.2em 1.2em = 2.4em?

CodePudding user response：

In most word processing or print design programs, the text size is in pt units. It's common for websites to use rem for responsive size. Fixed size units like rem are additive, where 1rem is half the size of 2rem.

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths

CodePudding user response：

So, is 1.2em 1.2em = 2.4em?

Not necessarily: em is relative to the defined font size for the current tag/class/ID, so it doesn't work when combining different tags (especially headers like h1 - h6, but also p, li etc.). If you need font size relations like 1.2 1.2 = 2.4, it's better to use rem as a font size unit. It always relates to the defined (or if not defined: browser default) font size for the html tag.