Hi, I've noticed that in omega-text.css the font size is given in pixels and not in em. If it's perfectly fine to set type in pixels, from a responsive web design perspective, it may be better to use a relative typesetting, that is, setting the font-size value in em.
What do you think about?

Comments

JSCSJSCS’s picture

JSCSJSCS CreditAttribution: JSCSJSCS commented

In CSS, one em is equal to the font-size setting in place in the HTML. Most browsers today do a good job of zooming pixels as well as em's. The trouble I have with em's is the nesting issue. When I place a .8em div into another .8em div, I get .64em sized text. When I place a 16px div inside a 10px div, I get 16px.

In Drupal, we are often working with others and moving content around from one region to another. I like knowing what size it will be when I do.

andypanix’s picture

andypanix CreditAttribution: andypanix commented

I agree, it is undoubtedly easier to think in pixels, but the question is not about the ability of browsers to scale up or down the font, but about a "best practice" relatively to responsive web design.
I.E. if in the wide layout I want to make all fonts bigger, using pixels I need to override each font-size rule individually, while using ems, I can simply change the base font size (probably the body font size) and all fonts scale accordingly.
If you have a block that may be moved around by other people and the nested-ems problem concern you, you can always specify font-size in pixels for that specific block.

andypanix’s picture

andypanix CreditAttribution: andypanix commented

This not seems a popular topic / feature request... or perhaps many CSS lovers lurk around this "issue".
Anyway, for those who have problems with ems and relative font sizes, this site may help: http://pxtoem.com/

Argus’s picture

Argus CreditAttribution: Argus commented

You can always make a custom setup with em, place that in global.ccs and use that whenever you start a new theme.

I would favor the em approach, but perhaps there is a reason why to choice was made not to use it.

Nice link tnx!

andypanix’s picture

andypanix CreditAttribution: andypanix commented

Hi, yes in fact this is what actually I've done, but I was also asking if there was a particular reason behind the choice to use pixels. I've googled and made some searches on drupal.org looking for something about this choice but I wasn't able to find nothing, so I decided to post here, looking for a constructive discussion.

himerus’s picture

himerus CreditAttribution: himerus commented

andypanix:

That code in omega-text.css is likely leftover from all the way back to the 6.x version of Omega...

I am becoming more and more of a fan of using ems (or even %'s because those are even more fun) in my projects.

I'm more than willing to get everything lined out to make a switch on some of the core css elements, but the biggest struggle is not to break anything (including basic font sizing) for anyone using the stylesheet, and that is the most important element...

A possible way forward would be to leave the "legacy" css files there, but for NEW subthemes generated/created, those are disabled, and the newer versions implemented instead.

andypanix’s picture

andypanix CreditAttribution: andypanix commented

Hi, thanks for answering... alas, I wasn't thinking about possible problems with an upgrade path... and you are right, this is a priority.

Excluding the possibility of a new branch, probably the "legacy" css is the right solution, using the new css files only for building new themes from scratch, and disabling old CSS files.

Furthermore em and % should be used even for margin and padding properties, and this can easily break existing layouts.

I think that it would be a good idea to give the possibility to the final user to select which kind of typesetting to use, if a relative one (new and default) or a fixed one (the old legacy mode) in the moment of building the subtheme or by enabling / disabling some CSS in the omega settings, since it seems that a lot of people prefer pixels.

One last thing. At this address http://johanbrook.com/mediaquerydebug/ there is an handy css trick that could be used to debug media queryes. It would be great to include it in any of the new generated subtheme css:

global.css
subtheme-alpha-default.css
subtheme-alpha-default-narrow.css
subtheme-alpha-default-normal.css
subtheme-alpha-default-wide.css

maybe commented out and with a couple of notes. This will be a tremendous help for newbies to undestand the usage of different CSS files with media queryes.

marcoka’s picture

marcoka CreditAttribution: marcoka commented
Assigned: Unassigned » himerus
westis’s picture

westis CreditAttribution: westis commented

Has anyone thought of using rem instead of em? See for example http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style/

The advantage of rem compared to em is that rem (root em) is always based on the body size, not the size of the container like em. That means that 1.2em is always the same, even if it's inside a container of 1.5em for example.

The disadvantage is that a px fallback is necessary for IE8 and lower, and some other older browsers.