Font Size, ems vs. pxs, Browsers render ems differently

While working on a new site, I was running into a problem with font size displaying differently from one browser to another (Firefox vs. Chrome). The difference was significant, and caused a shift in position as well. In this case, the position was pretty critical, so I had to find the problem.

I had specified “em’s” for font size, and I found the solution to be to switch to specifying the font size in “px’s.” Now both browsers render the page nearly identically.

Thoughts?

They should be about the same. The usual default font-size is roughly 1em = 16px.
Putting font-size:100%; in the start of the css should re-set to default.
Also check that you don’t have the browser or fonts zoomed, Ctrl 0 should re-set any zoom.
They shouldn’t differ too much between browsers, Apples are a bit different, because they have different default fonts installed.

…until viewed by somebody who has their minimum font size set to a greater dimension - or who zooms the text because you’ve over-ridden their preferred font size.

1 Like

That would be because the base font sizes in the different browsers are slightly different. Of course if someone changes their browser base font size then theirs will be even more different to what you have already seen. This is a normal part of page functioning that you might break if you change it.

1 Like

Thanks for your reply. I haven’t been here for a while (roof work, plus a client Website), but I appreciate it. yeah, I wish these browsers would be more consistent. It makes it hard on those of us who design, and want to see everything looking the same no matter what browser a person uses.

Even so, as I said, I found it worked better using pixels, though a lot of people don’t recommend that.

I tried everything when I was working on it. It was the main menu that was giving me trouble, and things were moving from one browser to another., and I couldn’t live with it that way. I know my client wouldn’t like it either. He designed the site, and I’m coding it and hosting it for him. He sees everything that isn’t exactly as he did it in Photoshop. It’s hard enough to match what he’s done, let alone deal with positioning problems.

What they do is their problem, as far as I’m concerned. I can only do so much, and I want it to display a certain way. I understand that zoom will change things, but usually not enough to matter unless one zooms too far.

On that point, I find I zoom a lot myself, because some sites (typically news) use such tiny fonts you can hardly read the text, and what’s worse is that there seems to be a liking for font color that is a very light gray, which makes it even harder to read. It’s almost as if they don’t want anybody to read it! LOL Just one of my pet peeves.

Then explain to him that styling web sites if different from Photoshop design and it is meant to be that way - especially now in the times of so many different resolutions. Days of pixel perfect designs are gone and now web sites should be fluid and adaptive. Fonts are meant to be fluid as well - depending on system, browser and user settings.

1 Like

Particularly now with mobile devices where sizes specified in pixels can end up too small to read using a magnifying glass on some devices or where your visitor has to scroll to the right 5 times to read a line of text that has been made big enough for them to read and then ends up reading the same line again because they lost track of what line they were at.

Also using pixels for font size is more likely to break your layout when someone asks to have all the text zoomed to 400%.

First, I really appreciate all the comments and suggestions. I’m far from an expert, though I have been hand coding for years.

This client is an old HS friend. I’ve known him since we were about 10 years old. He’s an amazing artist, and I love doing his work, but it’s quite different from the way I work. He gives me art and I have to figure out how to display it. He does everything in Photoshop (which I don’t have, and I’m not likely to buy it). Here’s the site I’m talking about, just for reference: Tagart Design.

I created a drop down menu using CSS, which worked fine for me, but he said it didn’t work in his browser (Safari, which I suspect is an old version). I removed Safari from my machine, so I can’t test it. But I suspect his old version does not support CSS3, which is necessary for it to work. I’m just guessing, but I think that was his problem, and I told him so. He says, “Well, a lot of my potential clients have old computers, and if it doesn’t work for me it won’t work for them, and I’ll lose business.” That’s what I’m dealing with. He will not update his computer because he uses an old version of Photoshop which has features he likes that are not available anymore on the newer versions (he says).

Yesterday, he suggested that perhaps hand coding was not the way I should be working (he thinks it’s too slow, I guess) and suggested I get Dreamweaver. Does anybody use that? (rhetorical) I use Front Page 2003, but only as a means of setting up my hierarchy of files and folders. That’s all. I have Apache, PHP5.3 and MySQL installed on my machine, and I write my templates using PHP to create variables for different blocks of content, and a Controller (index.php) which defines the various variables and finally includes the template. To me, it’s easy, and it goes very fast, because I just reuse the index file for each page and simply change the variable definition to the address of the folder and file containing the content. My experience with programs like Front Page (and probably Dreamweaver) is that they are code heavy, and you get a lot of junk that you don’t want.

So, back to the Font sizes. As I said, he will notice everything, and if it isn’t exactly like he designed it, he doesn’t like it. Hence, pixels instead of em’s or % seemed to work best across browsers (Firefox and Chrome, for me). Is Opera still used by anyone? I used to have that installed to, but I didn’t like it very much.

I understand your comment “days of pixel perfect designs are gone.” However, for the kind of site we develop, which is for ADVERTISING primarily, not content heavy; i.e., some headlines and a small amount of copy, some photos and where to contact. I don’t think the small devices will ever be useful for a site that is primarily an online print ad. Just my opinion from and advertising standpoint, which I have some training in.

It’s a shame, but I think the small devices have in a big way ruined the Web in terms of design and display of art and advertising. They are basically messaging devices trying to replace something that was a fantastic tool for advertisers. They’ll never be as good, because you cannot see the whole page at once. The “art” has been taken out of the craft, and in advertising, art, headlines and ad copy are everything.

Every so often in my former job, some client would send us a screenshot with our website and say “look, something’s messed up in Chrome.”

It was always Chrome. And every instance, we discovered they had somehow, inadvertently, managed to zoom their browser one time in or out. In Chrome this sometimes leaves floats who don’t normally drop into dropping (so 1 zoom out could cause a float drop), or make a headline go from not wrapping to 2 lines.

Always triple check your zoom when comparing browsers.

I do. I realize the problems with zoom.

A lot of professionals hand code using DreamWeaver.

As with any WYSIWYANG (what you see is what you - almost never - get) web editor the ‘HTML’ you get from the graphical interface generally needs a significant rewrite before it will give you what you actually want and will involve more hand coding than if you simply use the test editor.

If you created the dropdown menu using the usual :hover method then it should work back to ie7 and all other browsers. If perhaps you used the ‘checkbox hack’ to make a click menu then older safari has a problem with the adjacent or sibling selector when used in conjunction with a pseudo class like :checked and won’t work. (I didn’t see a dropdown example on the site you linked to so couldn’t check.) Also if your client is using Safari on Windows then that was discontinued years ago and shouldn’t really be used as it is a vulnerable browser and will not have up to date security never mind support for decent css. There are virtually no Safari users on windows save for 1 or 2 misguided souls. However it should not be a problem to make the dropdown work (in a fashion) for Safari but you should factor that into your cost.

The main problem is that your first conversation with the client should be about what browsers you are going to support and if the client insists on very old browsers then you should factor that into the cost but that will of course impact on the majority of your visitors who I guarantee will have much more modern equipment. You cannot support every browser that ever existed unless you revert to plain text so the** key question to discuss with a client** at the beginning of a project is which browsers and devices you are going to support. I ran into this problem early on in my career and never make the same mistake twice (if I can help it :smile: ).

Although pixels or ems behave differently the majority of the time there would be very little difference in desktop browsers as most that I know start with a base of 16px = 1em assuming no users settings are in effect (even if you set the size in pixels there are browser settings that can change this anyway). Therefore if you are sizing in ems based on a 16px starting point there will be no difference between pixels and ems assuming you have used the right fractions to match other pixel sizes.

There may be problems if you have applied ems to nested elements but that is more a problem of incorrect coding than a problem with ems themselves. There is no harm in having the odd bit of text described in pixels but for the main content it is better to keep it in ems (or rem for modern browsers).

Notwithstanding the above there will still be a variation of how text is displayed depending on browser, platform and device and that is one thing you cannot control even if you use pixels all day. It’s just something you have to live with and only seems to be a problem with some clients who simply do not understand the medium that they are working with. In most cases it is up to the designer/developer to educate the client otherwise you end up designing a site that only works on the client’s computer and nowhere else.

The challenge is to create great design for all devices. Advertising is about getting your message across to as many people as possible and these days that will most likely be more mobile/tablet users than desktop users. Good design and good artwork will always shine through but you must not forget that this medium is not print and does not abide by the same rules.

Mobile has actually saved and rejuvenated the web rather than ruining it! However, there are still a lot of sites are still morbidly obese so there is still some way to go in educating designers and developers to study the medium that they have immersed themselves in and make practical and informed choices about the work they put out.

In the end its about professionalism and integrity and having something that you are proud off and that stands up to scrutiny in the arena that you have chosen. It can be a bumpy road at times I grant you and some clients can be impossible to please but perseverance is the key.

6 Likes

For the drop-down I used the “hover” method. I don’t even know what the other method is you described. He said it didn’t work. It worked fine for me. Go figure. You don’t see a drop-down on the site because I removed it, per his instruction.

He’s an Apple guy all the way. He thinks it’s superior. I don’t know if it is or isn’t, but you can’t argue with him. Thanks for the info on Safari.

Thank you!! Re. paragraph 2! I feel vindicated! I agree with you.

Exactly. I told him that. He didn’t want to hear it though. Thank you again!!!

Re. pixels vs. em’s: It was only in the menu that for some reason I was getting a position shift using em’s from one browser to another. As a rule, I have no problem using em’s and I usually start with them unless I run into some issue like I did here. That one is still a mystery, but I didn’t feel like wasting the time to analyze it. I just change to pixels instead. The rest of his site is in em’s.

I understand text will still display differently in different browsers I have been seeing that for years.

Been all through this before on the advertising and small devices. I know this medium is not print, but until these mobile devices came along, one could create a site much like a beautiful print ad, and it would look just as good on the Web. The type of clients I have and the type of site I do needs full screen. It’s that simple. I’m not interested in less. The biggest problem with the Web prior to the mobile devices was with people clinging to table based layout and people with absolutely no design or advertising experience; i.e., positively UGLY Web sites that wouldn’t attract anybody. My opinion.

I agree with your last.

Most sites look really ugly at full screen because it is way too wide. Most web sites look much better at half screen.

Ah Ok, You could have popped in here to the forum before you removed it and we would have checked it for you. That’s what forums are for :smile:

Modern Safari on the mac is pretty good and should have no problem with a normal hover menu. There may have been a conflict or error as browsers have different ways of recovering from errors and is the usual reason for different behaviours. A lot of people immediately blame the browser but it ends up being a small typo in the code causing a conflict somewhere.

Yes and no. An attractive background to “frame” the page will enhance the overall look. Secondly, one does not have to open his browser to full size either.

I checked the function of the drop-down in Firefox and Chrome, and had my daughter check it on her computer (Windows 7 with - I think - IE10) She said it worked fine.

Yes, and I think you for all your help, too. I also told him that he should not have a problem with Safari if it is an up to date version, and that I’m sure Apple wants him and all users to be able to view any Website as it was designed to be viewed. It should support the current HTML/CSS/JavaSrcipt technology. I think his problem is an old version.

Web design would be easy if it wasn’t for clients getting in the way :smile:

2 Likes