Choosing Between EMs and Pixels for Font Sizes: A 2011 Perspective

In the past, EMs were favored over pixels for font size because they could scale with IE6 while pixels could not. Nowadays, modern browsers can handle pixel-sized font scaling correctly. Another advantage of EMs is that they cascade, unlike pixels.

But if someone is working on web development for modern browsers and does NOT want cascading font sizes, would pixels be the better choice?

I'm trying to consider if there are any other disadvantages to using pixels for font size instead of EMs. Thank you!

Answer №1

Although most modern browsers can zoom in on text that is sized using pixels, not all of them can scale text sized with pixels – it still varies depending on the browser.

For example, in IE8, you can easily zoom in on text without any issues. However, if you try to scale text using the official text size modifier (by going to page -> text size -> largest), it doesn't work properly.

  1. In IE8 - Zoom works, but scaling does not
  2. In Firefox 4, beta 12 - Zoom works, but scaling does not
  3. In Google Chrome 10 beta - Zoom works, but scaling does not

Many organizations I collaborate with use the official text size modifier as part of their user/group settings management. When setting up accounts for users, they often pre-configure it using this setting. Personally, I prefer using EMs because PX doesn't scale consistently across different platforms.

And a few words from the W3C:

Units: avoid absolute length units for screen display

  • Avoid specifying font-size in pt or other absolute length units for screen stylesheets, as they render inconsistently and cannot be resized by the User Agent (e.g., browser). Instead, use relative length units like percent or em.

Reference: http://www.w3.org/QA/Tips/font-size

Answer №2

One disadvantage of specifying font size in pixels is the difficulty in uniformly adjusting text sizes across a website post-development.

If you establish an absolute font-size for the body element and utilize Ems for other text properties, modifying the entire site's text sizes can be achieved by simply changing the body element's font size.

It is safe to assume that many users are unfamiliar with adjusting only text sizes using browser zoom features, yet web designers still strive to maintain consistency between text, page components, and overall layout proportions.

Answer №3

Every up-to-date browser comes equipped with full-page zoom capabilities, making pixels the preferred unit of measurement for achieving a harmonious text size and graphic display on webpages (which are pixel-dependent).

Answer №4

Here is my approach:

  • Start by incorporating a reset.css file (I recommend Eric Meyer's )
  • Establish default styles for elements like h1, h2, a, etc.
  • If necessary, use EM units for sizing.

I have gained valuable experience in ensuring cross-browser compatibility, including on mobile devices, throughout my web development journey.

Give it a try :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can anyone recommend any offline editors for HTML, CSS, and JavaScript similar to JSFiddle, jsbin, or codepen?

Is there an alternative to JSFiddle.net that allows users to experiment with Javascript, HTML, and CSS offline in a similar way? ...

How about placing one element above another? What sets apart using the margin property versus the position property for achieving this effect?

As I pondered the concept of stacking context, a question arose in my mind. Through my readings, I learned that by not applying any CSS properties that create a stacking context (such as position), it is possible to stack elements on top of each other usin ...

What is the best way to design lists that adjust to different screen sizes by incorporating multiple columns within the available width?

Back in my old fixed-width days, I had a clever method of distributing data across three columns by dividing the number of elements by three. It worked pretty efficiently. Now in this modern responsive world, my current solution involves splitting data in ...

Choosing between JavaScript and Handlebars.js depends on the specific needs

Can anyone explain the advantages of utilizing Handlebars.js or similar libraries over solely relying on JavaScript? Thus far, I haven't come across any functionality in Handlebars that cannot be achieved with just pure JavaScript. ...

Creating Responsive Headers Using CSS for Mobile Devices

I'm looking to make my header font size of 60px more responsive for mobile devices so that the text doesn't get cut off. Any suggestions on how to achieve this? Thank you! Here's the code snippet: h1 { font-size: 4.286em; /* 60px */ margi ...

Adjust the width of the graphics on both sides of the text based on the length of the text content

Is there a way to center an H1 tag between two graphics using CSS or jquery/javascript? The width of the H1 text will vary depending on the page. The dot on the left should remain at the edge of the site, and the line should extend to meet the edge of the ...

When a textarea contains a new line, it will automatically add an additional row and expand the size of the textarea

Developed a form with the functionality to move placeholders in a textarea upwards when clicked. The goal is to increment the height of the textarea by 1 row for every line break. However, I am uncertain about what to include in the if statement of my Ja ...

Change the color of the text to be the opposite of the background

I'm facing a challenge while creating a website for my friend. The background of the site is a moving image, and I want the font color of the main title to be the opposite of it on each frame. While I know this may require CSS, I am unsure of how to ...

Navigating with Anchors, Styling and jQuery

Firstly: Apologies in advance for any language errors as English is not my native tongue. :) The Scenario Here's the deal: I'm attempting to create a single button that, when clicked by the user, automatically scrolls down to the next DIV. Each ...

Ways to conceal components upon clicking a different element

Struggling to make this jQuery function properly. I have a form with all fields contained in a div.form-group. The subscribe button is identified by the id subscribe. I'm aiming to hide the form fields when clicked, but my JavaScript doesn't see ...

Steer clear of downloading images while on your smartphone

As I develop a responsive website, I encounter the challenge of optimizing image loading based on viewport size. While using CSS to hide images not needed for certain viewports can reduce display clutter, it does not prevent those images from being downloa ...

What is the proper method for storing user registration information in the database so that it can be easily retrieved and accessed later? (Error message)

User.cs: An error is occurring in the User class where 'User' is not a valid type in the context of TestBlazor project. It happened when attempting to save user registration data. using System; using System.Collections.Generic; using S ...

Shifting the position of an HTML page to one direction

I'm currently working on adding a sidebar to my Twitter Bootstrap 3 project. The goal is to have a fixed positioned nav nav-pills nav-stacked show up on the left side of the page when a button is clicked. I've set its z-index to 1000 so it appear ...

Tips for Aligning Form Elements in the Middle using Bootstrap

What could be the issue? I can clearly see the container border, indicating the space available for my work. However, when I insert the row (div) and offset (div), the content gets left-justified. <div id="page" class="container" style="border:soli ...

What is the best way to create a layout containing a <div> split into three columns, with the middle column having rows?

I'm currently working on a <div> layout that I need to split into rows. The challenge is creating a design that is fluid and can adapt to various screen sizes, including mobile devices. While using an HTML table might be a quick fix, it's n ...

How to position button components at the center in a NextJS application?

Incorporating a button within my nextjs page has been a challenge as I am striving to position it in the center of the page for optimal viewing on both PCs and mobile devices. Despite various attempts, the button remains fixed on the far left side of the p ...

How can I ensure that a div is positioned over another div with the same coordinates across all screen sizes?

[http://jsfiddle.net/w7r3gveg/]1 I am looking to position 4 Facebook logos in the center bottom of my background image. The background is represented by the 'bg' div, while the Facebook logo is in the 'facebook' div. Currently, I can ...

Is my page not displaying correctly due to compatibility view?

My client "jordanzad.com" has a website where the main page design appears broken when viewed in compatibility view. Can you help fix this issue? ...

How can we seamlessly transition from adding a class to setting scrollTop on a particular div?

I have successfully implemented a jQuery script to change the background color of my navbar on scroll. Here's the code I used: jQuery(document).ready(function($) { $(window).scroll(function() { var scrollPos = $(window).scrollTop(), nav ...

Attempting to display divs at the bottom when hovering over menu options

I need help troubleshooting my HTML and CSS code. I want to be able to hover over a menu item and have the corresponding div appear at the bottom. Can you point out what's wrong with my code? <!DOCTYPE html> <html> <head> &l ...