So I've recently moved to sizing fonts in rems to avoid descendancy issues that you get from using ems, in things like nested li's.
So I've sized my html font-size to 62.5% so I can just do p {font-size 2.5rem} /* 25px */
The problem arises when I want to change the font-size of a certain element, normally I'd just give the parent of say a block of text the size 0.8em to make things a little smaller.
But since rems are relative to the html element, I can't just write say .parent {font-size 0.8rem}, because it won't affect anything within it.
I'm also confused as to how to resize with media-queries.
Do I write out all my selectors again or do I just give my html a font-size of something smaller than 62.5% to make fonts smaller at smaller screen sizes?
I've been reading about font-sizing for days now and I'd love to get a definitive answer on what's the best practice for this.
To be honest, I think that using 62.5% leads to bad practice, which is why you're experiencing the confusion you are now (have a read of this: http://csswizardry.com/2011/05/font-sizing-with-rem-could-be-avoided/). I would recommend learning how to do the maths when working with a font-size of 100%. And then you would simply do exactly what you stated, simply decrease the root font-size for smaller screens (it would make a bit more sense that way).
As an example, if you were working with a root font-size of 100% (16px), and you wanted a font-size of 20px, use this formula:
font-size = target / context
So in this case, you would do 20 / 16 which gives you 1.25rem.
Also, when you want to change the font-size of a specific element, you are almost always better off changing that element directly, instead of a parent. That way, when you, or someone else, are looking for the font-size, it is in a place that makes sense!
Also, you can still mix rem and em if you want font-sizes to nest.
Related
I'm finally learning responsive design and I need to know the best practices for em and percentage units of measurement. If I were to set the font-size of the body to be 10px, would I run into problems down the line declaring all font-sizes em's (1em = 10px, 2.5em = 25px, etc.)?
Also, when is the correct time to use em units vs percentages? Are em units mainly for typography, and then percentages would be used for sizing, margin, padding, etc.?
I love the idea that I can scale font-size proportionally at media queries by changing the body font-size, but I don't think I would want my layout and spacing to shift based on the size of text (or do I?).
It is best practice to allow the browser's font size setting to affect your design–avoid setting the font-size of the body in pixels.
rem units are great for ensuring that everything scales proportionally to the browser font-size. em units are calculated based on the font-size of the parent element so they can become trickier to use when elements are nested. rem is always relative to the font-size of the html element (the root element). If you assume 1rem = 16px and build everything relative to that, then even if the user has set the browser so that 1rem = 20px, for example, then the entire design will scale up accordingly.
With responsive design, it is best practice to define media query "breakpoints" at screen widths where the content starts to become unusable (rather than at arbitrary widths based on popular devices). When your whole site is scaled up or down by the browser's font-size change, you will want the break points to also respect that font-size. However, since Safari treats rem media queries differently than other browsers, it is best to use em for media queries.
ok, first if you want using responsive design, i suggest strongly to you to use a framework like bootstrap or fondation to have a responsive design. You seem newbie in that way and responsivity is a bunch of css and preprocessor for most complicate cases.
But, to answer to your question, we dont resize fonts in media queries for most cases. Set per exemple your fonts in rem. So you must test on many devices your responsivity. By layout you must probably mean divs. Best practice is viweport vw (width) and vh (height) except if you want a proportionnal measure inside annother element. In that case, use %. Rem is better than em cause it is root em. The true size of a font difined in html. When the screen become too small on a device, you must collapsing your menu, and the text on your site must goes down in a div. I can continue like this a while, but like i said, use a framework, faster learning and faster development. Most devs like me use frameworks for their clients.
I've been having a play around using em's/rem's today on a new site and have several things i'd like to discuss/ask on here.
For many years I have been totally a pixel based person with a few percentages thrown in when required.
I keep reading that em's and rem's are "the way" the web should be. Fair Enough which is why I gave it a go today.
So, first things first. Are the point of using em's/rem's for dimensions literally just for changing the dimensions of things relative to the main font size?
If so, then for what situation would you change the main font size? I have always set mine to be 16px and worked with it.
I located a Sass mixin that allows me to specify in pixels my dimensions for any property and it outputs it with rem and a pixel based fallback. I tweaked it to my liking first though.
So I then started building the site using the rem mixin for all my dimensions (margin, padding and a few heights). Yes everything scales when I alter the main font size but again, same question as number 2 here.
I used Compass Susy to set my grid up and used em's to specify it's settings, (I normally would have chosen pixels). I set the grid style within Susy to be the magic-grid which makes the grid static when the browser is wider than the grid but entirely flexible on the inside.
Surely everything that I have read about the benefits of using em's can be done using media queries? What do you guys do and most importantly what do the mainstream sites use?
Right, the next two questions are to do with images. I came across two situations today where using em's/rem's with an image somewhere in the equation resulted in a problem.
5a. I had an h2 set to inline block and added padding around and then the rem equivalent of 45px padding on the right. I set the line-height to a unitless value of 1.3. I then set an image to be the background of the h2 to appear over to the right to appear in the padding-right. At the standard base font size of 16px all is fine. However I increase or decrease that font size and the top and bottom of the image crop off. So question 2 again. I see why the image is getting cropped but it's how to deal with the relationship between em's/rem's and images that is bugging me.
5b. I had a div with a height set at the rem equivalent of 200px in height. I then added an image into there which had a height of 200px. The width of the image was set using the susy mixin span-columns to a specific column width and the height was set to auto. When the font size was altered I either ended up with an image too tall or too short. What is the best thing to do in this situation?
I was looking through some of the compass mixins available and for example this one:
#mixin pretty-bullets($bullet-icon, $width: image-width($bullet-icon), $height: image-height($bullet-icon), $line-height: 18px, $padding: 14px) {
margin-left: 0;
li {
padding-left: $padding;
background: image-url($bullet-icon) no-repeat ($padding - $width) / 2 ($line-height - $height) / 2;
list-style-type: none;
}
}
I can't add in all my em/rem stuff in there?
I think the over arching questions are:
Why are em's/rem's required in the first place?
How do you work with them in relation to images?
Any thoughts guys?
There is a lot to say about your post and it would probably be best to start with a few basics:
Why use em or rem units?
Em & rem units are used to size things relatively.
Em units: An em unit in a browser changes relative to it's parent's font-size, whether that is a span, p, div, body or html element. So when using em units for font sizes and for width or height, those dimensions will depend on the current parent's font-size.
Rem units: An rem unit in a browser is relative to the base font-size of the document. If you set that to 16px then 1rem is 16px, 2rem is 32px and so on. This means that you can change the scale of the entire document at a single point and anything that is using that relative measurement is going to increase/decrease accordingly.
The Point: These measurements are 'relative' so the answer to the question, "Why use em or rem units?", is for the em unit, simply use them when you want to size an element in a web page relative to it's parent and for the rem, use them when you want to size an element relative to the document.
That's a simple approach but it puts web design in the right context for the next question...
How should em & rem units be used in design and layout?
The answer to this question is also multifaceted but to put it in simple terms using em, rem or any 'relative' measurement to describe elements in your design is a move away from static pixel based design.
For the most part em, rem & percentages are used for creating flexible layouts and flexible layouts have a whole different approach to the web and using elements within them than pixel based design. For instance, if you have a container that needs to expand relative to the document width and it has an image in it, you'll probably want that image to resize along with the container or situate itself differently depending on the available space.
Here's where we get into 'Responsive' designs and layouts in an attempt to make 'Adaptive' sites & applications and also where Media Queries and other techniques come in.
Personally I use em's almost exclusively for type and margins & padding of elements. Dimensions I describe in percentages and then it's almost always only the widths. There's only so much you can control in a world where the devices, device dimensions and pixel ratios keep doubling every year.
So to sum up, sort of...
1) If you need static dimensions just stick with pixels. There is generally no real benefit to using relative measurements if you need specific fixed dimensions.
2) Em's & rem's are one of many tools and serve their purpose as other tools (pixels) serve theirs. They are a great tool and worth mastering so use them when you need to but only when the problem requires relative sizing.
3) You may want to split those Compass Susy questions into a more specific post and provide some example if you want help with that.
I hope that helps even if it doesn't answer all of the questions you have here.
Cheers
Ems/rems are used to make the site adaptive to different settings on the client end. My browser settings can increase or decrease the font size on your site, and using em/rem allows you to adapt to my settings. It's a trade off - as with everything else in web design - between your pixel-exact control and your willingness to design around change and user control. There is no right answer - but I like to remind myself that the entire technology of the web is weighted towards user control, and any attempt for me to be pixel-anal is fighting against the core technologies.
Ems/rems can be used in media-queries to set breakpoint widths, but they solve a different part of the adaptability formula - font size, rather than screen size. Your Susy grid can now adapt to both at once!
Images are a pain for any kind of responsive/adaptive design work. The same solutions you might use for a fluid layout will help with an em-based layout. Common solutions involve the background-size property (Compass has a mixin for it) and setting html images to a max-width of 100%. See CSS-Tricks Rundown of Handling Flexible Media. I have use this fluid-media mixin to handle the "intrinsic ratios" approach for background images and the like.
But, more often than not, I find a way to design with fewer images. I like that the technology pushes me towards simplicity in that area - so it doesn't bother me.
I've read many articles, but I'm not quite sure what is correct today. I want to set the font size properly, but I am not sure what to use.
I've seen body { font-size: 100% } and body {font-size: 62.5% }. I have also read that the font-size should be px or not be px.
What would be the correct way to do it today? If IE 6 [is outdated] and 7 are slowly becoming outdated, what would be the best way to set the font to cascade through the web site?
That is very much depending on your personal programming style and preference.
I for myself prefer to set the font-sizes in em. That gives me the advantage that I can adjust all font-sizes in the page, by changing one number in the body.
If you use a font size of 100% or 62.5% is also personal preference and depending on the layout. No one can tell you an optimal value, because no one knows what you personally like and want.
You should use 62.5%, if you want your font-sizes to be relative (Useful for text zoom in FF and IE)
body {
font-size: 62.5%;
}
p {
font-size: 1.2em; /* this is 12pixel */
}
Why 62.5%? It's a value that works in all browsers
This is less a question, but more general guidelines. This can also be applied to the line-height property, which can be pretty buggy in IE. As a UI developer, my workflow is as follows:
Set a Pixel value on body, generally 12px, 14px, 16px, or 18px. (this will be your default). I would very much avoid using a percentage for your default font-size. I also generally set a percentage or EM based line-height on the body element for all text.
Use EMs to define values for text. You may set your general paragraphs to 1.0em, and your first child to 1.25em to be slightly larger. Set your headers to appropriate sizes and so on. It really depends on the site you are working on, and your preference.
Remember, that with CSS once you set a height, it cascades down. If your default font-height is 12 px, and you set all of your divs to 1.33em, then set a sub element of your div to 1.25em, you are going to have a very strange font-size... It's not wrong by any means, but it's not best practice.
With a little practice this will keep you pretty fluid in knowing what your font-size is at any time, and works well across browsers.
Also with this practice, for the visually impaired who increase font-size, everything usually expands well, if you can imagine that all of your font-sizes would be percentage based off a default pixel size.
A good resource to follow for setting EMs after declaring a font-size on the body is pxtoem.com.
Hope this helps!
I was reading now about how it’s a good practice to set the font on <body> to 62.5%, so that later you can use the divide-by-10 conversion from pixel units.
But I was wondering: why not set <body> to 6.25%? Then you can use the same dimensions for em units as for pixel units, assuming the default browser font size is 16 pixels.
E.g.
body {
font-size: 6.25%; /* 1px */
}
p {
font-size: 12em; /* 12px */
}
Two issues.
I seem to remember that if you set your initial font size quite small using a relative unit like ems, if the user resizes the text Internet Explorer, the font size will change quite a lot between the settings.
It’s an odd phenomenon, and I’m not sure if it still occurs in IE, nor if you’re worried about users in IE who change the font size.
You’re potentially condemning yourself to re-setting the font size every time you nest elements.
An answer I wrote to another question tries its best to explain this, but in short, if you’re doing your font sizes in ems, you’re better off using font-size as little as possible, rather than making it ever-so-slightly easier to use font-size when you do.
For example: say you want all <li>s on the site to use a font size of 12 pixels.
li {
font-size: 12em;/* 12px */
}
If you then use the following HTML:
<ul>
<li>
<ul>
<li>
...
Then you need to do this:
li li {
font-size: .083em;/* 12px */
}
Otherwise the inner <li>s will be 12 pixels * 12 pixels = 144 pixels!
Ems aren’t pixels. Ems refer to a percentage of the nearest ancestor’s font size, whereas pixels refer to actual pixels. In my opinion, trying to turn ems into pixels is more confusing than the alternative. You’re better off setting <body> to the most commonly used font size on the site, only changing from that when you need to, and putting the intended size in pixels in a comment after your em-based declaration. (That way, it’s easier to tell later if you’ve got something wrong.)
(Of course, the only reason we avoid pixels is because IE doesn’t change the size of text sized in pixels when the user changes the font size in the browser. If you’re not worried about that, then just use pixels.)
Short answer: Don't do this. Use px to set font sizes. If you need a bigger font, use a larger number of px.
Long answer:
The idea behind setting the base font is make it obvious how big a ems and exs are. If your base font size is 10px, then 1.0em is 10px, 1.2em is 12px, etc. It seems simple enough. The idea breaks down as soon as a container changes the font size from the base. If you're in a div with the font size set to 20px, then all the sudden 1em is twice as big as it used to be.
It gets worse. People started suggesting that 62.5% should be used rather than 10px.
(Note that 16 * 0.625 = 10). This was suggested because specifying a percentage for font size is a workaround for an issue with old versions of Internet Explorer. The end user couldn't "zoom in" unless you used a percentage.
However, % (when applied as the default font) is an absolute unit. It may seem like a relative unit, but here, it's a percentage of the user agent's default font size, and font sizes are specified in points. This introduces a subtle and incorrect assumption about the user agent, namely that the screen resolution is 96 dpi. This assumption often results in text which looks like this:
Hey check me out, I'm too small to read!
To sum up:
Don't use hacks for old versions of IE (4 years is plenty of time to maintain backward compatibility; IE7 is four years old this month).
Don't make assumptions about your user agent's resolution, and don't set the body font size to a percentage.
If you need more precise typographical control, use a CSS framework like Baseline.
If you are doing this, you will have to make sure you resize every font on the page. If you miss anything, it will be tiny by default (1px).
Resizing every font may be more daunting then you imagine, because when you use relative font sizes, you have to be very specific.
This question already has answers here:
What is the difference between px, em and ex?
(4 answers)
Closed 1 year ago.
One CSS rule I have learned is that you should use the relative "em" font-size unit instead of the absolute "pt". The general idea is to set the font-size in your body tag to e.g. "94%" and then set all other elements with an "em" size like this. The reasoning is:
you can then change the relative size of all the font sizes on your site by modifying the body's font-size at one point
users themselves can modify the size of the fonts since they are defined in "em"
However, when using "em" instead of "pt" I constantly run into issues such as the following where an element with font-size gets embedded in another element with font-size and thus becomes tiny (in the case below one vocabulary word is .8 of .8 and the other is .8 of 1.2).
<html>
<head>
<style type="text/css">
body {
font-size: 94%;
}
p {
font-size: .8em;
}
li {
font-size: 1.2em;
}
.vocabulary {
font-size: .8em;
}
</style>
</head>
<body>
<p>This is an <span class="vocabulary">egregious</span> test.</p>
<ul>
<li>This is in a <span class="vocabulary">superb</span> list.</li>
</ul>
</body>
</html>
Of course in very simple, straight-forward HTML sites this is no problem, but in the real world with imported stylesheets that perhaps you didn't even make and with dynamic sites where controls are embedded in other controls all of them outputting HTML with perhaps in-line styling, I find websites with "em" unit font-sizes are sometimes impossible to maintain and the way to get font-size under control is to just convert everything to hard "px" sizes.
In addition, I just checked the four main browsers and each of them have hotkeys which increase and decrease the size of "pt" styled fonts.
So here are my questions:
is there any real-world reason why I should use "em" instead of "pt"?
is there trick in using "em" sizes so that I don't run into the embedded font-size issue above?
Depending on the country where you live, you might actually end up breaking the law using pt instead of em, depending on how hard your legislature want to enforce rules. Here in the UK, there is a disability discrimination act, which has been used to target companies where their websites have been rendered in a fixed font. This is treated as discrimination because it disadvantages the partially sited who may have increased their browser font sizes to compensate - but your site still renders fonts at the size you set, and not at the size they would expect.
Yes, it's harder to get to grips with relative font-sizes and fluid layouts, but if you want to comply with legislation, you have to take the time to get to grips with this.
For local government work in the UK, targets have been set to ensure that websites follow Double A guidelines, one of which states "Use relative rather than absolute units in markup language attribute values and style sheet property values". See here.
Even if you hard-code the font-size in pixel, you can still use em for unit to specify margin, length, etc.. , similar to using em quad to indent a paragraph in the printing press anyway.
Edit (After the poster changed from px to pt): If you want to be "pixel perfect", it's safer to go with px rather than pt, since different operating system has different dpi setting, and user change change dpi dramatically especially on Linux. PostScript point is defined to be 1/72 of an inch. An "inch" on screen can be anywhere between 72 pixels to whatever floats your boat.
From my experience as a web user who likes big text:
Specifying "pt" for font sizes is fine, as long as you don't specify element sizes in px/pt. Because when you do, and I increase the text size, half the text overflows ouside the element and way too often overflow is set to hidden.
This doesn't need to distort your layout -- just leave room for everything to grow downward. I can handle scrolling the page better than I can not seeing the text.
1) IE6 is still widely used and is unable to resize the fonts defined in px. => Usability issues. That alone is a no-no.
2) See CSS Units for example.
3) Most authors agree to say that pt is mostly a print unit: at worst, use them in print stylesheets, where the resize problem disappears...
See also http://www.killersites.com/mvnforum/mvnforum/viewthread?thread=4084
px : changes with your screen resolution and other dependent issues
em : irrespective of your screen resolution, it will be same for all
Some professional CSS developers that I know use "px" to define font sizes in their main stylesheet for modern browsers, then have a separate stylesheet for IE6 that specifies them using relative units. That way they achieve usability and allow font magnification on all browsers, but without having to compromise their design on modern browsers.
(They actually go farther than that: their IE6 stylesheet turns off most block formatting and just lays everything out using a generic, mobile-ish look. That way IE6 users can see a simple layout, and everyone else gets the professional look where blocks actually float correctly.)