CSS Font Size Using Em Different on Different Pages

CSS font size using em different on different pages

My solution was basically to do inline styles to correct any problems. Using px rather than em was an option but we preferred to keep accessibility rather than best practice against using inline styles (any best practice was out the window anyway).

Same CSS producing different font sizes on different pages

Well I don't really understand the reason why this fixes it, but adding a meta tag for the viewport made the font behavior go back to expected:

<meta name="viewport" content="width=device-width, initial-scale=1">

Font sizes on different pages

As Albert mentioned in previous response, you should totally keep the headlines in the same size.

As a part of best practises "always use ems to set font sizes". You can update/ modify the size of body text with respect to your header font size.

For example: keep header size as 2em and make body text size as 1em or 1.2em as per your design requirements.

For further readings on this you can refer: W3S guidelines for font sizes

text with the same font size looks not the same size on different pages

It's most certainly not 10pt then. Or, the page is zoomed. (View -> Zoom -> Reset, in firefox).

Note that CSS takes the most-specific selector (or the one with '!important'), so make sure you don't have something else overriding it.

How does rem differ from em in CSS?

EMs are relative to their parent's font size

REMs are relative to a base font-size

This is important when intermediate containers change font sizes. Child elements with EMs will be affected, those using REMs will not.

Why are these pages with identical style tags producing different font-sizes?

It seems like a user-agent scaling issue. The solution to avoid such problems is to add viewport meta tag inside the <head> section (is it necessary?):

<meta name="viewport" content="width=device-width, initial-scale=1">

Without viewport tag:

Admin page without viewport meta tag

Both pages with viewport tag:

Admin page
Options page

Font size em shows differently on certain devices

em is a measurement relative to the current font size. If the browsers all have a different default base font size, then they'll look differently. Try using pt instead which is still appropriate for different size screens and is not fixed like px would be.

http://www.w3schools.com/cssref/css_units.asp

How to set two different font sizes in the same p

<p id="losinfo">Los Santos: <span id="secondText"> a sprawling sun-soaked ...</span></p>

Then style #losinfo and #secondText differently in css.

Is sizing fonts using em still relevant?

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)

If you will use this method, no need to calculate

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.

But 76% is much better and you can use this to calculate http://pxtoem.com/

Yes it's still relevant:

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.

Font size in css http://easycaptures.com/fs/uploaded/213/2470522253.png

I personally like ems. Others, like Chris Coyier over at CSS-Tricks.com likes pixels. (Chris has an excellent article on the different font units).

It really comes down to personal preference.

Almost similar or related questions on SO

Should we still use em and % for defining the font-size of the website elements?

Is there really any point to using relative font sizing in CSS?

Why em instead of px?

Font size in CSS - % or em?

CSS font size: relative vs. absolute values. Which to use?

Problem with EM

Using relative instead of fixed size in CSS

Helpful online tool for px to em

http://pxtoem.com/

http://riddle.pl/emcalc/

http://convert-to.com/pixels-px-to-em-conversion.html

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

http://converter.elementagency.com/

EM Calculator AIR application (will work on all os)

http://jameswhittaker.com/journal/em-based-layouts-vertical-rhythm-calculator/

http://jameswhittaker.com/projects/apps/em-calculator-air-application/

Windows apps

http://www.thebrightlines.com/2009/11/16/pixem-pixel-to-em-converter/

http://www.storkas.com/Projects.aspx(go at bottom)

Pixels to Ems Conversion Table for CSS

http://jontangerine.com/silo/css/pixels-to-ems/

http://reeddesign.co.uk/test/points-pixels.html

emchart

http://aloestudios.com/tools/emchart/

http://aloestudios.com/code/emchart/

Some more articles on this issue

http://www.d.umn.edu/itss/support/Training/Online/webdesign/type.html

CSS Font Size Using Em Different on Different Pages