Change font size of an element depending on browser (HTML, CSS)

Question

I'm trying to make a simple website (I'm not good with HTML/CSS at all).

I have a certain element that looks good in Firefox but huge in Chrome. So I would like to set the font-size to 2.3em in Firefox and 1.6em in Chrome.

I know there are browser prefixes that work for animations etc., so I'm trying something like this:

-moz-font-size:2.3em;
-webkit-font-size:1.6em;

However, that makes the font size look good in Chrome and tiny in Firefox. Is there any way to select the font size automatically, depending on which browser is used? Thanks in advance

Answer 1

There are 3 units you can choose for font-size :
1)px - tells the browser how many pixels the letter should be. I would highly recommend you to use this
2)% - tells the browser how big the font size should be w.r.t parent element
3)em - it scaled the font size by x of the parent font size. In short the value will get multiplied by parent size.

Now every browser has it's default font size.
For Firefox it's 16. (Menu -> Options -> Language and Appearance)
For chrome it's medium.(Settings -> Appearance)

Now if you put font-size as 6em,

Then in Firefox it will be like 16*6
And in chrome the 6 will get multiplied by Chrome's default size.

Using px will display the font having same size in both chrome and firefox

Answer 2

To control appearance across browsers, I would use a reset so you don't have to worry (as much) about the user agent stylesheet. Meyer reset is an old one but good one until you're ready to make your own.

From experience, I personally think you should set the font size for the document in px and use em for the fonts in elements / components so that it is all relative and responsive. When devs fix the font size to px, they are basically saying, "I want users to see exactly this," which can be problematic for people who rely on being able to adjust the font sizes at the browser level to read content, etc.

Reference:

https://css-tricks.com/snippets/css/meyer-reset/

https://kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent

https://css-tricks.com/building-resizeable-components-relative-css-units/

While I'm not a huge fan of the 62.5% rule, it's important for historical reasons and just so you're aware of the font sizing philosophies out there so you can choose your own.

Answer 3

Try in px.

Answer 4

Wow, it is very detailed ~ learned something new, thank you🙏

Answer 5

Rishi Anand Thank you, I didn't know about the different default sizes.

Now my problem is that I used em everywhere in the website and when I start to use absolute sizes in px for one element now, the element will still be too large/small in relation to the other elements (I hope that makes sense), so I'm trying to make it a little smaller in Chrome than in Firefox. But changing the size in px dependent on the browser with -moz-font-size doesn't seem to work 😩

But maybe it's best to change the whole site from em to px

Answer 6

Bohdan Thank you! I changed it to

-moz-font-size:60px;
-webkit-font-size:30px;
font-size:40px;

because this website says that the non-prefixed version should be last: http://css-snippets.com/browser-prefix/

But now both browsers seem to choose 40px and it actually makes no difference which values I use for -moz-font-size and -webkit-font-size...

Answer 7

Elisha Paul If you wish to learn Java and C++, Sololearn offers courses for both of those languages. Please navigate to the learn section and find the corresponding courses.

Answer 8

62.5% rule? What's that? Means padding ratio? Like golden ratio?

Answer 9

Try to include whatever the webpages you produce with normalise.css.
Normalize.css reset browsers default setting and makes crossed browsers render all elements more consistently.

To include normalize, you just need to add
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
inside your head tag

DO NOT define different font size for different browsers, use a single font size that defined on body tag. And for the rest of the elements, ONLY USE em to adjust the their font size and dimension width or height of the elements.

This is how professional web developers make consistency of their web pages in all browsers.

Answer 10

A note on em:

Please do not confuse em with ex or rem units. Em represents the full font height (relative to parent), ex represents the x height.

I prefer to use ex when dealing with distances of decorative elements from text, e.g. bullets in ul or numbers/letters in ol, depending on the look of the font. Ch units are generally more appropriate for the examples listed though, since it is width-based (again, depending on the look of the font).

Rem is em except it is relative to the root element instead of the parent, which negates (overrides?) cascading benefits.

Answer 11

Hello~ it's me again~
I come back with all the above three parts put into code playground

https://code.sololearn.com/W9P5CdQ3LL56/?ref=app

Conclusion: only the third way works (seems, didn't check in a Firefox). Sorry again for the wrong answer of method 1 and 2.

Answer 12

I actually did write some code that detects what browser the user is using, from there it's just if (browser) do (code and stuff)

Answer 13

Gordon please see second linked reference, Addendum toward the bottom. 😊

Answer 14

Happy to help. 😊

Answer 15

SECURITY LED Visual Studio Code and Atom are very good for web projects, Sublime text and Phpstorm for php, pycharm for Python, and Netbeans for Java, that's all I know

Answer 16

Anna me neither have core knowledge in webpage cascading but this question helped me to research on font sizes and found this article.

How To Avoid Browser Font Incompatibility?

Knowing which browsers support a font family is one thing and making them support is another. So to make sure that your font family is rendered properly in every browser even if the user doesn’t have the font family installed on his local computer is to use @font-face in CSS style.

Addition of @font-face allows a webpage to download the font from the hosted location and display it in the CSS as specified.

Add the code to use stylesheet before any styles:

@font-face {
font-fam

1em is equal to the currentfont-size of the element in question. If you haven't set font size anywhere on the page, then it would be the browser default, which is probably 16px. So by default 1em = 16px. If you were to go and set a font-size of 20px on your body, then 1em = 20px.

source link:https://css-tricks.com/css-font-size/
Hope it helps. Thank you

Answer 17

Can you share your code/project/site for a practical test?

Answer 18

Wich's the better editor text? I need know once. Thanks,

Answer 19

"em"?,how about "px"?or"%"?

Answer 20

To me the easiest solution would be to set the font size to 10px for the html element, thus inheriting this value to everything, that way you have the exact same font size across all browsers.

As many have pointed out, though, EM inherits the value of the parent element, so if you do a div with a different font size, any element within it will inherit that font size and that will be used for EM instead of what the root html says.

The 62.5% rule means, it will make the size relative to what the user's font size is. The user can alter the font size to their needs when they have any kind of visual impairment. If you do html font size 10px, they cannot alter this value, only you can. So 62.5% is mostly equal to 16px when used in the html element font size, and in this way anyone with a visual impairment can adjust the size later as needed.

I advice you to use REM since it takes the value of the html root element instead of the parent element, making the font size consistent throughout the project.