Rectangle 27 5

The real question: how do I give my users the ability to resize text

Don't use em when you really mean %. The only reason em works is because in CSS 1em which is suppose to represent the size of the letter "M" (em comes from "M") is actually equivalent to the font size. So when you're writing 1em you are actually writing "100% of inherited font-size". The em is meant to be used when specifying box dimensions relative to the font-size (which is rare, really really rare).

This hole "you can't re-size it in browser" is a modern day myth that dates back to the stone age, when browsers text resizing was a frontend feature and thus there was still some truth to it.

In short: not by default. Browsers offer a page zoom by default, and this is buried deep inside the menu bar usually under view. You can expect some of your users to know the shortcut Ctrl+MouseWheel but actual text zoom is more tricky. With the modern trend of doing away with the menu bar (note: as of this writing FF4 beta also does away with it, by default) you should consider users requiring text zoom are those in real need of it. I say this because the trend of tutorials/advice on the net is to simply glorify elastic layout and being able to re-size text but not really the issue. Sadly too many "professionals" in elastic/em/fluid layouts completely miss the point: site should look okey if I zoom to 300% or higher! If it just looks good at things like 130% or 170% that's completely pointless and waste of effort and only really useful when they were stupid enough to set their base font to something like 10px or lower (way too small for large bodies of text).

The other issue is "some browsers don't zoom", out of those IE6 is the only relevant one, because it still holds some small share of the internet. If you think otherwise, you've probably been reading some articles from 2002 or so (ie. 1 years after it's introduction), wake up to reality:

It may also be useful to know the current trend (as per sites like Google) is kill IE6 asap! You are by no means being professional by supporting this cursed browser from almost a decade ago, along with other monstrosities such as IE5.5. Before reading advice in web design, check the date.

Rule of thumb: always write what you mean in the context with the most concise syntax.

User who need bigger text are users with poor vision. Poor vision should not be confused with being totally blind when text is of a certain size. Given how wide the types of eye problems are, typically offering a small increase in size such as say 130% or 160% or so, is just no where near enough. You are just trying to be fancy, and it doesn't work at all!

What you want is to give your users the ability to resize the text they wish to read. And the recommendation is to offer a simple A/A (2nd "A" should be smaller; complementing it with text such as "normal", "2x larger", etc., is useful). Place this somewhere visible, the most common position is in the right top corner of the content the user wishes to read. The context of "content" is very important:

If you must make your entire site "elastic" (ie. dynamic based on font-size)

Note: extremely large font sizes are not the rare ones, its the other way around. Typically the preferred sizes are 12px (don't have anything lower for base, ever!), 16px and just monster large.

css - Is sizing fonts using "em" still relevant? - Stack Overflow

css browser
Rectangle 27 5

The real question: how do I give my users the ability to resize text

Don't use em when you really mean %. The only reason em works is because in CSS 1em which is suppose to represent the size of the letter "M" (em comes from "M") is actually equivalent to the font size. So when you're writing 1em you are actually writing "100% of inherited font-size". The em is meant to be used when specifying box dimensions relative to the font-size (which is rare, really really rare).

This hole "you can't re-size it in browser" is a modern day myth that dates back to the stone age, when browsers text resizing was a frontend feature and thus there was still some truth to it.

In short: not by default. Browsers offer a page zoom by default, and this is buried deep inside the menu bar usually under view. You can expect some of your users to know the shortcut Ctrl+MouseWheel but actual text zoom is more tricky. With the modern trend of doing away with the menu bar (note: as of this writing FF4 beta also does away with it, by default) you should consider users requiring text zoom are those in real need of it. I say this because the trend of tutorials/advice on the net is to simply glorify elastic layout and being able to re-size text but not really the issue. Sadly too many "professionals" in elastic/em/fluid layouts completely miss the point: site should look okey if I zoom to 300% or higher! If it just looks good at things like 130% or 170% that's completely pointless and waste of effort and only really useful when they were stupid enough to set their base font to something like 10px or lower (way too small for large bodies of text).

The other issue is "some browsers don't zoom", out of those IE6 is the only relevant one, because it still holds some small share of the internet. If you think otherwise, you've probably been reading some articles from 2002 or so (ie. 1 years after it's introduction), wake up to reality:

It may also be useful to know the current trend (as per sites like Google) is kill IE6 asap! You are by no means being professional by supporting this cursed browser from almost a decade ago, along with other monstrosities such as IE5.5. Before reading advice in web design, check the date.

Rule of thumb: always write what you mean in the context with the most concise syntax.

User who need bigger text are users with poor vision. Poor vision should not be confused with being totally blind when text is of a certain size. Given how wide the types of eye problems are, typically offering a small increase in size such as say 130% or 160% or so, is just no where near enough. You are just trying to be fancy, and it doesn't work at all!

What you want is to give your users the ability to resize the text they wish to read. And the recommendation is to offer a simple A/A (2nd "A" should be smaller; complementing it with text such as "normal", "2x larger", etc., is useful). Place this somewhere visible, the most common position is in the right top corner of the content the user wishes to read. The context of "content" is very important:

If you must make your entire site "elastic" (ie. dynamic based on font-size)

Note: extremely large font sizes are not the rare ones, its the other way around. Typically the preferred sizes are 12px (don't have anything lower for base, ever!), 16px and just monster large.

css - Is sizing fonts using "em" still relevant? - Stack Overflow

css browser
Rectangle 27 1

Our task was to find a way to size text that allows designers to retain accurate control of typography, without sacrificing the users ability to adjust his or her reading environment. We tested various units across common browsers. Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), was shown to provide accurate, resizable text across all browsers in common use today. This is a technique you can put in your kit bag and use as a best practice for sizing text in CSS that satisfies both designers and readers.

Ems can be tricky to work with, especially when nesting elements deeply, as it can be hard to keep track of the maths. However, commenting your style sheets well and styling elements from the body inwards can keep things easier to follow. This more complex example and its accompanying style sheet demonstrate how to size nested elements using the body as the starting point.

CSS font-size: Does it matter what kind of unit you use? - Stack Overf...

css font-size
Rectangle 27 1

Our task was to find a way to size text that allows designers to retain accurate control of typography, without sacrificing the users ability to adjust his or her reading environment. We tested various units across common browsers. Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), was shown to provide accurate, resizable text across all browsers in common use today. This is a technique you can put in your kit bag and use as a best practice for sizing text in CSS that satisfies both designers and readers.

Ems can be tricky to work with, especially when nesting elements deeply, as it can be hard to keep track of the maths. However, commenting your style sheets well and styling elements from the body inwards can keep things easier to follow. This more complex example and its accompanying style sheet demonstrate how to size nested elements using the body as the starting point.

CSS font-size: Does it matter what kind of unit you use? - Stack Overf...

css font-size
Rectangle 27 6

Points are great since they are 1/72 inch tall. You know how tall your text will be. Problem with pixels is that they get smaller the higher the resolution. Pixels are great if you want to wrap text around a background picture. Takes some work but it can make a nice looking page. I have heard that pixels are not resizable in IE - so if they want to increase the font size they can't. Don't use IE, so I can't say. Remember hearing that. EM's leave you at the mercy of how the person has that defined font sizes in their browser. Ems and percentages make it easy. I always use points.

No, points are not the best. To anyone who finds this thread, forget that you ever read that. This is a web design forum. For displaying pages on screen media. Points are included in CSS solely for the purpose of print design. For print media stylesheets. They are not scalable as % and ems are. If you are any sort of web designer you should be working to make your pages accessible and using points is a strike against that right off the top.

It's funny, everyone answer "pixel or %/em" and not "pixel or points".

I didn't know there was a difference between both.

Do not specify the font-size in pt

Keep the usage of such units for styling on media with fixed and known physical properties (e.g print)

A points guaranteed to be 1/72th inch or is this too adapted to scaling like a pixel-screen DPI?

According to what I've read, it's not guaranteed to be 1/72th inch, except when printed... Look up the "more info".

Heh, then back to when to use a pixel vs a point ... nice links though.

Don't use ems unless you are a CSS purist fantasist. Pixels display and scale perfectly in all common browsers.

Pixels vs. Points in HTML/CSS - Stack Overflow

html css pixels points
Rectangle 27 11

The result is that Safari and Firefox still resize the text, whereas IE6 and IE7 do not. The text can be resized in Opera and IE7 by using the page zoom tool, which magnifies the page layout, text and images within.

Text size in ems iteration 2

The results show that, across all browsers, text at the medium browser setting is rendered identically to text set in pixels. It also demonstrates that text sized in ems can be resized across all browsers. However IE6 and IE7 unacceptably exaggerate the smallness and largeness of the resized text.

Body sized as percentage iteration 3

The results show that the difference between larger and smaller browser settings in IE6 and IE7 is now less pronounced, meaning we now have all browsers rendering text at an identical size on their medium setting, and resizing text consistently.

The results show that the 18px line-height is inherited by all text on the page....Unfortunately the results show that the 18px line-height is not scaled by IE6 and IE7 when text is resized, meaning the largest setting appears to squash the text.

The results show accurate, consistently resized text and line-height across all browsers. Perfect. Or nearly so.

The Safari monospace problem iteration 6

The results show consistently resized text and line-height across all browsers, including the monospaced text in Safari 2.

Even though this article is dated 2007, it's still very much relevant. Setting font sizes is more than just setting an em (or px).

This answer doesn't address the question, and the link (whilst interesting reading) can't be considered relevant when the browsers concerned are at least one major version on from where they were in 2007.

Your question is whether using ems to size fonts is still considered worthwhile. The answer is conditionally yes, but only when applied with other means. Setting line height, for example, ends up being likewise important. Consequently, using ems only partially solves the issue. In terms of Chrome, FF3, IE8, the article still applies. Yes, it is old, but is still relevant.

So, it's all IE 7 AND 6. 6 is dying, 7 is on it's way there - who cares? Safari 2? I'll just use pixels.

css - Is sizing fonts using "em" still relevant? - Stack Overflow

css browser
Rectangle 27 11

The result is that Safari and Firefox still resize the text, whereas IE6 and IE7 do not. The text can be resized in Opera and IE7 by using the page zoom tool, which magnifies the page layout, text and images within.

Text size in ems iteration 2

The results show that, across all browsers, text at the medium browser setting is rendered identically to text set in pixels. It also demonstrates that text sized in ems can be resized across all browsers. However IE6 and IE7 unacceptably exaggerate the smallness and largeness of the resized text.

Body sized as percentage iteration 3

The results show that the difference between larger and smaller browser settings in IE6 and IE7 is now less pronounced, meaning we now have all browsers rendering text at an identical size on their medium setting, and resizing text consistently.

The results show that the 18px line-height is inherited by all text on the page....Unfortunately the results show that the 18px line-height is not scaled by IE6 and IE7 when text is resized, meaning the largest setting appears to squash the text.

The results show accurate, consistently resized text and line-height across all browsers. Perfect. Or nearly so.

The Safari monospace problem iteration 6

The results show consistently resized text and line-height across all browsers, including the monospaced text in Safari 2.

Even though this article is dated 2007, it's still very much relevant. Setting font sizes is more than just setting an em (or px).

This answer doesn't address the question, and the link (whilst interesting reading) can't be considered relevant when the browsers concerned are at least one major version on from where they were in 2007.

Your question is whether using ems to size fonts is still considered worthwhile. The answer is conditionally yes, but only when applied with other means. Setting line height, for example, ends up being likewise important. Consequently, using ems only partially solves the issue. In terms of Chrome, FF3, IE8, the article still applies. Yes, it is old, but is still relevant.

So, it's all IE 7 AND 6. 6 is dying, 7 is on it's way there - who cares? Safari 2? I'll just use pixels.

css - Is sizing fonts using "em" still relevant? - Stack Overflow

css browser
Rectangle 27 40

Do not specify the font-size in absolute length units for screen stylesheets. They render inconsistently across platforms and can't be resized by the User Agent (e.g browser). Keep the usage of such units for styling on media with fixed and known physical properties (e.g print)

You can set the font-size of the body to 62.5%(that is 62.5% of the default of 16px), which equates to 10px, or 0.625EMs. Now you can set your font-size in EMs with an easy to remember conversion, divide the px by 10.

* 12px = 1.2EMs
* 13px = 1.3EMs
* 16px = 1.6EMs
* 8px = 0.8EMs
* etc

This makes everything SUPER easy to remember and eliminates the need for conversion tables. Of course, you will still need to use a conversion table for nested elements when using EMs, if you are not being specific in your CSS, which is a whole separate issue.

IE6 is still widely used and is unable to resize the fonts defined in px. => Usability issues. That alone is a no-no.

and

IE 7 and 8 don't resize text sized with pixels either, actually. They do have page zoom, but some people prefer to incease text size only.

Here's a summary of what's good and bad about font sizing in general.

Problem with EM

Convert entire site from px to em (This tool is still in development)

Agreed. Some users change their font size or use a different DPI setting, and using px for your font-size ignores their settings. I consider that user-hostile.

I'm not going to down vote this, but it's technically wrong: browsers do typically resize fonts with absolute sizes (including recent versions of MISE, Safari, Firefox & Chrome). I would also add that using relative sizes for screen fonts is not a panacea for inconsistent font rendering, different browsers still render the same font differently, even on the same OS.

@BalusC - everything in this answer is copied from somewhere else, nothing is written by me but my aim is to give good info to all. professional or Average doesn't matter. Who can search good information from google does matter. I'm notsaying u r not right

@Pandiya but you should always acknowledge your sources.

I could not object to this stronger: "IE 7 and 8 don't resize text sized with pixels either, actually. They do have page zoom, but some people prefer to incease text size only." The vast majority of users have no idea how to adjust font size (and are frustrated when they actually do so). The ones who need to adjust font size now have abundant tools available including the latest release of every single browser that handle page zooming (even with fixed fonts). Your position is dated and this practice is completely unnecessary.

css - Is sizing fonts using "em" still relevant? - Stack Overflow

css browser
Rectangle 27 40

Do not specify the font-size in absolute length units for screen stylesheets. They render inconsistently across platforms and can't be resized by the User Agent (e.g browser). Keep the usage of such units for styling on media with fixed and known physical properties (e.g print)

You can set the font-size of the body to 62.5%(that is 62.5% of the default of 16px), which equates to 10px, or 0.625EMs. Now you can set your font-size in EMs with an easy to remember conversion, divide the px by 10.

* 12px = 1.2EMs
* 13px = 1.3EMs
* 16px = 1.6EMs
* 8px = 0.8EMs
* etc

This makes everything SUPER easy to remember and eliminates the need for conversion tables. Of course, you will still need to use a conversion table for nested elements when using EMs, if you are not being specific in your CSS, which is a whole separate issue.

IE6 is still widely used and is unable to resize the fonts defined in px. => Usability issues. That alone is a no-no.

and

IE 7 and 8 don't resize text sized with pixels either, actually. They do have page zoom, but some people prefer to incease text size only.

Here's a summary of what's good and bad about font sizing in general.

Problem with EM

Convert entire site from px to em (This tool is still in development)

Agreed. Some users change their font size or use a different DPI setting, and using px for your font-size ignores their settings. I consider that user-hostile.

I'm not going to down vote this, but it's technically wrong: browsers do typically resize fonts with absolute sizes (including recent versions of MISE, Safari, Firefox & Chrome). I would also add that using relative sizes for screen fonts is not a panacea for inconsistent font rendering, different browsers still render the same font differently, even on the same OS.

@BalusC - everything in this answer is copied from somewhere else, nothing is written by me but my aim is to give good info to all. professional or Average doesn't matter. Who can search good information from google does matter. I'm notsaying u r not right

@Pandiya but you should always acknowledge your sources.

I could not object to this stronger: "IE 7 and 8 don't resize text sized with pixels either, actually. They do have page zoom, but some people prefer to incease text size only." The vast majority of users have no idea how to adjust font size (and are frustrated when they actually do so). The ones who need to adjust font size now have abundant tools available including the latest release of every single browser that handle page zooming (even with fixed fonts). Your position is dated and this practice is completely unnecessary.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

css - Is sizing fonts using "em" still relevant? - Stack Overflow

css browser
Rectangle 27 1

it has something to do with you using percentages rather than say Pixels or EMs

I got it so that it is staying centered but i still have it sticking to the top of the browser.

<html>
  <head>
    <title>
      HTML test page
    </title>
    <style>
      .horizontal{
    width:100%;
    height:100px;
    background-color: #bbb;
      }
      .vertical{
    width:100px;
    height:250px;
    background-color: #bbb;
      }
      #container{
    margin:auto auto;
    width:750px;
    height:400px;
      }
    </style>
  </head>
  <body>
    <div id="container">
    <div class="horizontal">
    </div>
    <div class="vertical" style="float:left;">
    </div>
    <div class="vertical" style="float:right;">
    </div>
    <div class="horizontal" style="float:left;" >     
    </div>
    <h1 style="font-size:3em; color:Green; text-align:center;">
         HTML Test page
    </h1>
    </div>
  </body>
</html>

Edit possibility you could use a MediaQuery and set the top:###px so that the rest of your page sets up with the center. but you would probably have to create several CSS Files or write a lot of CSS code to make it work

Thanks, But I'd like you to go to www.bing.com, because I want to center my whole div, your code is really helpful but it centered it from top side, I want my div to be in center of browser, not in top

there is a vertical-align in CSS but I can't for some reason get it to work on the Div inside the body tag. you are going to have to use some form of Javascript to accomplish exactly what is going on there I think

I edited my answer. I am not sure that Media Queries will work with zooming though? figured it was worth a shot.

css - How to center a div tag in a html page without being affected by...

html css centering
Rectangle 27 1

it has something to do with you using percentages rather than say Pixels or EMs

I got it so that it is staying centered but i still have it sticking to the top of the browser.

<html>
  <head>
    <title>
      HTML test page
    </title>
    <style>
      .horizontal{
    width:100%;
    height:100px;
    background-color: #bbb;
      }
      .vertical{
    width:100px;
    height:250px;
    background-color: #bbb;
      }
      #container{
    margin:auto auto;
    width:750px;
    height:400px;
      }
    </style>
  </head>
  <body>
    <div id="container">
    <div class="horizontal">
    </div>
    <div class="vertical" style="float:left;">
    </div>
    <div class="vertical" style="float:right;">
    </div>
    <div class="horizontal" style="float:left;" >     
    </div>
    <h1 style="font-size:3em; color:Green; text-align:center;">
         HTML Test page
    </h1>
    </div>
  </body>
</html>

Edit possibility you could use a MediaQuery and set the top:###px so that the rest of your page sets up with the center. but you would probably have to create several CSS Files or write a lot of CSS code to make it work

Thanks, But I'd like you to go to www.bing.com, because I want to center my whole div, your code is really helpful but it centered it from top side, I want my div to be in center of browser, not in top

there is a vertical-align in CSS but I can't for some reason get it to work on the Div inside the body tag. you are going to have to use some form of Javascript to accomplish exactly what is going on there I think

I edited my answer. I am not sure that Media Queries will work with zooming though? figured it was worth a shot.

css - How to center a div tag in a html page without being affected by...

html css centering