- This topic is empty.
-
AuthorPosts
-
May 19, 2014 at 7:39 am #170593
Anonymous
InactiveIs 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; }
May 19, 2014 at 7:53 am #170594Paulie_D
MemberNo 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?
May 19, 2014 at 7:59 am #170595Anonymous
InactiveThanks 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…
May 19, 2014 at 8:03 am #170596Anonymous
InactiveThe 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?
May 19, 2014 at 8:05 am #170597Paulie_D
MemberI’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?
May 19, 2014 at 8:13 am #170598Anonymous
InactiveMay 19, 2014 at 6:19 pm #170630__
ParticipantWell, 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
%
orem
) 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
, usepx
. Trying to turn some other unit of measure intopx
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
em
s, cascade: they are relative to their parentem
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.May 19, 2014 at 8:19 pm #170641Anonymous
InactiveSo 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/May 19, 2014 at 8:54 pm #170646nixnerd
Participant@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?
May 19, 2014 at 8:54 pm #170647nixnerd
Participantand by SASS… I always mean SCSS… traq.
May 19, 2014 at 9:09 pm #170649__
ParticipantSo 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
em
s when you are designing withem
s in mind.and by SASS… I always mean SCSS… traq.
: pppppppppppp
May 19, 2014 at 10:35 pm #170654Anonymous
InactiveInitially I was referring to
rem
instead ofem
. 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!
May 19, 2014 at 11:21 pm #170658__
ParticipantInitially I was referring to rem instead of em.
No, I understand. The main (only?) difference between
em
andrem
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 : )
May 20, 2014 at 1:28 pm #170730nixnerd
ParticipantI 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.
-
AuthorPosts
- The forum ‘Other’ is closed to new topics and replies.