how get current text size in css

Question

I'm tring to write a css that for all string that I can put on increase these strings about 3px. I don't know how can I do this, I think something like this:

.increaseSize {
getSize()+3px;
}

Anyone can help me?

Answer 1

I would seek a different and much simpler approach.

p.myText {
  font-size: 16px;
}

.increaseSize {
  font-size: 1.5em
}

<p class="myText">This is some standard text and <span class="increaseSize">this is a bigger font size text</span></p>

This would make any .increaseSize element font size 50% bigger than its parent.

You can use calc() but maybe browser compatibility is a problem. This is a safer solution.

Does this help you?

Answer 2

You can use it like the following example:

div {
  font-size: 1em;
}
span.increase {
  font-size: calc(100% + 3px);
}

<div>
  Hello <span class="increase">World</span>
</div>

With the % unit you can get the actual font size of the element. Now you can use calc (browser compatibility) to add the 3px to the current font-size.

You shouldn't calculate the font-size yourself for responsive web-design. You can / should use relative units like em, rem or % to achieve responsive font-size.