Absolute Font Size?

Personally I don’t like how CSS has an additive effect on font-size.

Similar to the tip I learned yesterday about Line-Height, is there a way I can define an absolute Font-Size?

For instance, in this code…

<p>This weekend is our <span>Fire Sale<span>!!</p>

If < p > is 1.5em, I would like < span > to be 2.5em (versus 2.5em of 1.5em).

Thanks.

Give the HTML element a font size (e.g. 16px) and then make use of the rem font unit.

Rem doesn’t inherit from direct parents like Ems do.

Well, the C in CSS does mean cascading :wink:
In the hands of a proficient CSSer, a very powerful tool. For most of us, a gotcha waiting to happen.

You could always specify font-size in pixels instead of em or %, but that might cost you some visitors

EDIT

Ah, I haven’t experimented with that yet. One more for my todo list.

My problem with cascading em is that the math sometimes isn’t pretty.

If the parent is 1em and I choose 2em for the child, then the child is 2em.

But what if the parent is 1.3em and I need the child to be 1.5em in absolute terms. What do I choose for the style?

That’s my issue…

I prefer rem sizing. Ems is fine and all, but you can end up with some really quirky font sizes if you aren’t careful.

Just something I prefer. We were fine before REM was introduced. We could live without it. I just find it’s easier for me.

It also allows for me to basically make my own version of “vh”. Where I can simply media query different font sizes (16px, 15px, etc) for different sizes and it works like VH should (or rather, how we all want.)

No clue what that means!!

With my current issue, I have a parent at 21.6px and a child at 27px - ugly math!

Don’t worry, you don’t need to. If you want to learn about VH units, feel free to Google for more information.

Yay for EM sizing.

Where this can be really annoying is when on Page 1 you have Parent–>Child–>Grandchild, and on Page 2 you have Parent–>Child and you are trying to get Grandchild = Child across pages.

Yup, an excellent scenario where REM would be better over EM.

Except - if I understand correctly - if you choose 16px for your base font and someone is on a high-resolution monitor, then you are screwed…

I was hoping for the best of both worlds!

The resolution would make no difference. You can add media queries to change the font size for the HTML element, as pointed out earlier. Then all REM measurements will update accordingly.

Too much for my brain to process right now.

I will stick with EMs and occasionally grumble for now! :slight_smile:

Simple example for you. Add more queries for different sizes, etc.

Just thought I’d get you something. Take it or leave it.

html
{
  font-size:16px;
}
@media only screen and (max-width: 1000px)
{
  html
  {
    font-size:14px;
  }
}

Did you have any problem selecting a font size in the old non-responsive days using pixel sizes?

If not, go with rem, as @RyanReese suggests. The rem unit does not scale like ems or percents as layers become nested. It remains proportional to the user’s font size, the <html> element, not the font size of the parent box.

I have always used EM because it is relative to a user’s preferred settings and scales.

I know nothing about this media stuff - it sounds like it relates to mobile and that topic has to wait for now.

But if I set the parent font to 16px and someone is visually empaired and they want the base to be 32px, then I have done them a disservice that wouldn’t have happened with EM, right?

Off Topic:

@RyanReese, ever gonna get back to me on your Enlarge Photo with JavaScript idea?

The em unit is relative to the font-size of a parent container.

The rem unit is relative to the font-size of the <html> element; therefore, easier to code (no math to speak of).

In both cases, the user controls the displayed size of the font.

The sizing of the font within nested elements is much easier using rem units than em units because the rem is relative to the size of just one thing, the <html> element, which could be empty or could be percent. In all cases, the displayed font size is ultimately controlled by the user’s browser (just like your experience with em).

What’s this now? Had a hectic couple of days so I’ve been on here only a smidge bit.

I’m not suggesting using pixels to size fonts on a web page. That was an analogy. I forgot how young you are.

Well, you asked if I was interested in learning a JavaScript solution, and I was just reminding I said, “Yes.” :sunglasses: