Question about font-sizing with REMs

[Anonymous]

Is there anything wrong with setting a base font-size of 1px and then define the font-size of headers, paragraphs, lists etc. using rem? The 1px base size allows the rem values without decimals.

For example:

html {
    font-size: 1px;
}

h1 {
    font-size: 25rem;
}

p {
    font-size: 15rem;
}

[Paulie_D]

No problem AFAIK…it’s all the same….I think.

Base font-size is pretty much always going to be px based unless you go with vh or something esoteric.

I confess I’d probably go with rem rather than % so at least I know what I’m referring to but that’s a personal choice.

EDIT…Whoa…you edited your post.

Why 1px? Why not 10px, or 20?

[Anonymous]

@paulie_d

Thanks for the feedback. I ended up changing the question in my original post. I noticed that when using a percent-based size, anything above or below 100% causes nested elements to size differently. The REM seems to correct the issue…

[Anonymous]

@paulie_d

The 1px base size allows REMs without decimal values. So essentially 15px = 15rem. Seems more consistent with standard font sizes…plus it’s much easier to calculate. Is this bad?

[Paulie_D]

I’ve always worked on the basis that my base text is going to be a paragraph…and that would be 1 rem…and I start at 16px.

Anything above that would be a heading of some kind and so would be larger so a multiple (1.5 or whatever of rem).

I’m unlikely to go much below an h3 so it’s not a huge issue….however, if I really need small text I can set 0.5 rem or whatever.

I don’t worry about calculating exact pixel values, and 16 divides many ways by 2, 4, 8 etc.

It’s a matter of choice really, you’re really only going to define the base setting once (most of the time) so how you do it is up to you.

Do decimal values really matter?

[Anonymous]

@paulie_d

After reading Chris Coyier’s font size method…I’ve decided the 1px base size is probably not a wise approach…

[__]

Well, a few things I’d like to toss out there:

The 1px base size allows REMs without decimal values. So essentially 15px = 15rem. Seems more consistent with standard font sizes…plus it’s much easier to calculate. Is this bad?

The idea of moving away from “pixels” as a unit of measure is about focusing on the design aspect of design instead of the monitor itself. Regardless of what you think of that, relative units of measure (like % or em) are great for responsive designs… but not if you intentionally limit them to being exact translations of pixel measurements.

So, if you want to use px, use px. Trying to turn some other unit of measure into px just gives you the worst of both worlds.

when using a percent-based size, anything above or below 100% causes nested elements to size differently. The REM seems to correct the issue…

Percentages, like ems, cascade: they are relative to their parent em size. If you start with (say) 10px, then a div at 1.5em will work out to 15px, and a paragraph inside that at 1.5em will be 22.5px. I’m not saying that’s what you want, but they are supposed to work that way.

[Anonymous]

@traq

So from my understanding, font sizes using em or % will have identical values if they share the same base size? I did a small test and that seems to be the case…are you aware of a situation where they might differ?

Demo (%) : http://jsfiddle.net/Ld3wE/
Demo (em) : http://jsfiddle.net/cj2Sy/

[nixnerd]

@noob, do you get what @traq is saying? He’s wondering why you would needlessly convert px to em. If 15em = 15px, just use px and have one less layer.

This reminds me of someone on these boards that used variables in SASS like this:

$00ccff : #00ccff;

It wasn’t quite that bad. It was more like this

$bl001 : #00ccff;

But the point is, if you’re going to use non-human friendly variable names for colors… just use the hex code. Do you get what he’s saying?

[nixnerd]

and by SASS… I always mean SCSS… traq.

[__]

So from my understanding, font sizes using em or % will have identical values if they share the same base size?

In many cases. (In most cases, I say, you will probably never see a difference and don’t need to worry about it; though someone may argue this point.) And, of course, percentages are defined as a percentage while ems are defined as decimal numbers.

But, bigger picture, Joe_Temp is right: what I was getting at is, if you’re designing in pixels —right or wrong— there is no point in converting them directly to some other unit. Likewise, you should use ems when you are designing with ems in mind.

and by SASS… I always mean SCSS… traq.

: pppppppppppp

[Anonymous]

@joe_temp

@traq

Initially I was referring to rem instead of em. I was reading about Chris Coyier’s most recent method for sizing text and was curious about setting a1px base for making conversions easier and more consistent with the standard font sizing used in design applications. After re-reading the article, I discovered this method would not work properly with a 1px base because he downsizes the base with media-quiries.

In regards to the question about em vs %…I was simply wondering if there was any subtle differences in their output. According to my testing, they both seemed identical, but this article explains there are a few key differences.

Anyways…sorry for the confusion and thanks for the help guys!

[__]

Initially I was referring to rem instead of em.

No, I understand. The main (only?) difference between em and rem is which element they are sized relative to: em to its parent element; rem to the root element.

making conversions easier and more consistent with the standard font sizing used in design applications.

What “design applications”? Converting between units is one thing; making good use of those units in your design is completely different. The two concepts don’t overlap much.

Perhaps it would be helpful to know your objectives. Is there a particular problem you’re trying to solve? For example, if you’re trying to take something generated by a wysiwyg and magically turn it into a clean, modern, responsive design, sorry; it won’t happen.

According to my testing, they both seemed identical, but this article explains there are a few key differences.

Bear in mind, that article was published sometime in 2008.
Even the “update” was written almost 3½ years ago.

If you want to see some differences, try using em vs. % on something other than font size (element width/ height/ padding/ etc.).

thanks for the help guys!

no problem at all : )

[nixnerd]

I just need to throw this out there… be careful when you’re using relative font-size values. However you want to do it is technically fine but just make sure that value never dips below an absolute value of 16px. That is my threshold, as anything below that is hard for some people to read.

[Author]

Posts