Making all text / fonts look the same in all browsers

What are others here doing in their code to ensure that their website fonts look the same size and style across all browsers please?

I make my layouts fluid enough that if a user chooses to alter the text size or font in their browser for whatever reason, that change will be accommodated.

3 Likes

The font face used is not dependent on the browser but on the fonts available on the client machine, which is why some font-family specifications can get quite silly. One of the shorter ones I came across had 16 fonts:

font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

One way to ensure all your visitors see the same font face is to use a web font.

2 Likes

Thanks Sam and Gandalf, I always use Verdana, which would usually be on the viewers machine.

Trying to get it, so that if Firefox, Chrome and IE, were all on 100%, to show the same font size on all 3.

You shouldn’t try to force your visitors to view the text at your chosen size; instead, you should design the site to be fluid, as @SamA74 said, so that it can accommodate the user’s browser settings.

What’s the point of designing a site which looks perfect to you if the font size is too small for some visitors to read?

Totally understood. The aim here is for the 3 browsers, if they were in 100% viewing mode, to display the same size.

Agreed. There is nothing wrong with specifying default fonts in your order of preference, but you should not try to force your preferences upon others. Well, at least if you don’t want them to have a bad experience or risk having them leave.

Ah, OK - I understand the question now. Sorry for the confusion.

If you are using ems (or rems) for sizing, then you would need to ensure that the browser defaults are set to the exact same size. I’m not sure how (or if) you can do that. Chromium (and, I think, Chrome) offers font settings as small, medium, large, etc. whereas Firefox uses numbers. (I don’t have IE handy.) I suspect you’ll always have a slight difference because of the different ways browsers render text, especially when it comes to scaling up or down a fraction of a pixel.

I usually set font size to 100% in the resets at the beginning of my css to make 1em equal the browser’s default font size, whatever that may be. Most browsers default to 16px, but users have the ability (and right) to change that at will.
I then use em units (mostly) for any subsequent variations in size to be relative to the default.

That is a standard “web safe” font which exists as standard on many systems. But standard installed fonts can vary on different OSs.
Again users may override fonts in their browser which you can’t control.

I’ve seen this mentioned before. 16px is a very big font size to be the default font size, isn’t it?

No, not really, depends who you ask, some would say it’s small.

2 Likes

Can anyone please point me to a css where this happens, in a real life scenario.

Most of the time they will automatically be the same size assuming the same font. Where are you seeing an issue?

The default is 16px in most modern browsers (although it doesn’t have to be that) so all will look the same unless you or your visitors have changed size/settings.

Mobiles may have different defaults as they may optimise the default to be the best for that device. Readable text on mobile should generally be 16px minimum.

There will be minor differences though whatever due to, font spacing/kerning, version and platform specifics (mac PC), anti aliasing, sub pixel anti aliasing and so on…

As others have said if you leave the default font-size alone alone and then use rems (or ems for older browsers) then you can be sure the visitor will get the best for their platform. Obviously some fonts are not consistent between mac and PC and their versions differ slightly anyway. In the end its a non issue if you just let your page breathe :slight_smile:

4 Likes

I’m seeing the issue on a 21 inch monitor.

As a web developer it’s a good idea to test using different browsers. But l seriously doubt that many users will visit using different browsers and scrutinize the differences.
In other words, as long as it looks good and similar, there shouldn’t be a need to worry about things being exactly the same.

2 Likes

There’s a big difference, and just thinking, that if the browsers are all on 100%, there shouldn’t be such a difference.

Have you checked the default font settings in each, and made sure you haven’t set any of them to zoom?

All on 100%.

And the font size Medium?

I just see 100%'s.