font-size difference between chrome and firefox using rem - html

I work on a web project with Bootstrap and I have some trouble with font-size.
Try to run this HTML snippet in chrome and then in firefox with an mobile view like iPhone 7:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
html {
font-size: 40px;
font-size-adjust: none;
}
h1 {
font-size: 2rem;
}
</style>
</head>
<body>
<div>
<h1>
test
</h1>
</div>
<button type="button" class="btn btn-primary">Send</button>
</body>
</html>
You will see that in the firefox mobile view the font size is much larger than under chrome. However I initialize well the font size of <html> to a pixel value (here 40px) and then I only use rem has font size values (bootstrap also use rem values for the font size).
Why is the rendering so different?

Edit
This is pretty annoying.
On Firefox, 40px = 40 desktop-sized pixels, does not respect your emulated device.
Not sure what Chrome does, but in a 667px window set to iPhone 6(1920px), 40px = ~17px.
Responsive designs can mitigate these issues.
If responsive designs are a no-go, set font size based on vh, instead of px.
html {
font-size: 10vh;
font-size-adjust: none;
}
Old answer
On my machine, the snippet is the same size on both browsers in mobile mode.
Have you altered your zoom factor? This will change the size of rem/em.
It's possible that your OS' DPI settings could change this, too.
For consistent sizing, use responsive designs, such as flex boxes and the % css unit.

Related

HTML font rendering issue on non-retina display

I am having trouble rendering Poppins on my site the way it renders on Google fonts demo site.
When using a non-retina display it renders "too thin", for example, the bars on the T are only 1px high, instead of 1.5px high when I look at the same text on font.google.com.
I like the way it looks on Google fonts much better. On my site the font looks "chopped" at the top but I cannot figure out what they are doing in their HTML to get a different rendering.
This codepen demonstrates the issue but beware: you need a non-retina display to see the issue!
Code:
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap" rel="stylesheet" />
</head>
<style>
body {
margin: 48px;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 18px;
}
main {
display: grid;
grid-template-columns: 20% 30% 40%;
column-gap: 5%;
align-items: center;
}
h2 {
font-size: 1.2em;
font-weight: normal;
align-self: center;
}
a {
color: #000;
}
small {
display: block;
font-weight: normal;
font-size: 12px;
}
img:first-of-type {
grid-row-end: span 2;
}
</style>
<body>
<h1>⚠️This issue is only visible on non-retina display!</h1>
<main>
<h2>
Browser rendering
</h2>
<div>
TITLE TEXT HERE IS 18<br />
<small>^^^ T bars will be too thin on non-retina browser</small>
</div>
<img src="https://i.imgur.com/7LyzjJy.png" />
<h2>
Screenshot of Chrome on MacOS (broken)
</h2>
<div>
<img src="https://i.imgur.com/2OZ0wv6.png" />
<small>^^^ Notice how the T bar is too thin.</small>
</div>
<h2>
Google Fonts<br />
(screenshot of Bold 700 on <a href="https://fonts.google.com/specimen/Poppins?preview.text=HTML+TITLE+TEXT+HERE+IS+18&preview.text_type=custom&selection.family=Poppins:wght#400;700&sidebar.open">
the demo page</a>)
</h2>
<div>
<img src="https://i.imgur.com/dgld0Jw.png" /><br />
<small>^^^ Notice how the T bars are thicker</small>
</div>
<img src="https://i.imgur.com/pQPZ6Ch.png" />
</main>
</body>
</html>
I see your point,
it seems that there are some issues with the latest version of this font, others have complained too.
now why it is rendered okay on google? it could be that the demo version google script is using isn't the same as the one on their fonts CDN though I'm not sure
Solution:
until they fix the issue, Use Webfont
same font same CSS as the one in your pen
except this is an older version, you can host it on your own server
using something like webfont (I believe you know how to do that but in case you don't)
fontsquirrel makes the proceedure dead simple.
BTW this is on a mac and a separate HD screen
Note:
I noticed a tiny bit of spacing between the letters/words but nothing that
can't be fixed with some CSS letter-spacing or word-spacing
First thing - since macOS Mojave, Apple has disabled font smoothing by default. This is hard to notice on Retina Displays, but easy to notice on non-Retina. Executing defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO and logging out mostly fixes the problem. Without font smoothing text look a bit smaller.
The second problem seems to be in the way Google Fonts are working. When you type the preview text on Google Fonts demo page you are loading only characters you need for this given text - this is to save bandwidth as you are going to download about 18 styles of it.
However the font seems to be just a little bit different.
Google Fonts embed
Poppins downloaded from Google Fonts, imported manually via #font-face
Font constructed by Google Fonts downloaded from the network page on developer tools
1 and 2 look identical. The difference in 3 is almost unnoticeable, except for letter T and E.
Please also note that on Google Fonts demo page text is rendered with -webkit-font-smoothing: antialiased; which usually makes the text seem a bit smaller, maybe this is why the generated font is a bit bigger.
This can be noticed if you have Poppins cached and change the font manually from generated one to real Poppins.
This is my take on this problem, but on the way to it, I also found that sometimes subpixel rendering was present.

CSS HTML why do things resize based on screen width when I specify width in px?

How come text resizes proportionally when the screen resizes even though I set the font size in px instead of em or % or something like that? I'm pretty sure the pixels on my monitor don't change size...
When I set the px value to look normal on a wide screen it ends up way too small on small screens like cellphones. I want to be able to use something like #media screen and (max-width: 1000px) to specify what the text should be on small screens instead of it shrinking on its own.
I made a very simple page to make sure nothing I did earlier messes with it. I have the text sized to be readable on a regular pc screen:
But if I resize the screen to less then 1000px width the text shrinks without me specifying the new text size or using em or % values.
The text should fill like half the empty space.
HTML:
<html>
<head>
<meta charset=\"UTF-8\">
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="banner">
<div>
<div class="t_banner">Banner</div>
<div class="t_banner2">Banner sub text</div>
</div>
<div><span>Phone</span> <span>999-999-9999</span></div>
</div>
</body>
</html>
CSS:
body{margin: 0;}
.banner{background-color: #f0eedb; height: 185px; box-shadow: 0px 4px 15px #555;}
.t_banner{color: #413e3e; font-size: 50px; font-weight: 600; font-family: Roboto Condensed, serif; border-bottom: solid 3px #222;}
.t_banner2{color: #413e3e; font-size: 45px; font-weight: 500; font-style: italic; font-family: Roboto Condensed, serif;}
EDIT:
I experimented by removing the height: 185px; from the .banner styles. Then I added some more text to the banner:
I also added a with no styles between the and the . The banner text is still resizes, but the the phone and "text" at the bottom doesn't.
Now if I either remove the extra "banner sub text" or bring back "height 185px" then everything, including the completely unrelated p text ends up tiny. Everything seems completely random at this point, and I only have like 2 files with a few lines each
I think what is throwing you off is that you don't have a viewport meta tag in the head of your document, and without this, by default mobile devices will typically scale the page to fit the screen.
Scaling the page usually includes scaling the images, and as you have seen, scaling the font sizes.
To verify this check this codepen: https://codepen.io/panchroma/pen/MERRxy
If you visit the live view at https://s.codepen.io/panchroma/debug/MERRxy/wQAPoZQNRWer on any device I think you will find that the fonts are full size and isn't shrinking.
The HTML and CSS for this example are exactly the same as you have posted above, except that I added a viewport meta tag in the head of the page. You'll see that if you comment out this tag, font sizes will shrink in the live view.
More about viewport meta tags:
https://www.w3schools.com/css/css_rwd_viewport.asp
Hope this helps!
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- <link rel="stylesheet" type="text/css" href="styles.css" /> -->
</head>
<body>
<div class="banner">
<div>
<div class="t_banner">Banner</div>
<div class="t_banner2">Banner sub text</div>
</div>
<div><span>Phone</span> <span>999-999-9999</span></div>
</div>
</body>
</html>
CSS
body{margin: 0;}
.banner{background-color: #f0eedb; height: 185px; box-shadow: 0px 4px 15px #555;}
.t_banner{color: #413e3e; font-size: 50px; font-weight: 600; font-family: Roboto Condensed, serif; border-bottom: solid 3px #222;}
.t_banner2{color: #413e3e; font-size: 45px; font-weight: 500; font-style: italic; font-family: Roboto Condensed, serif;}

different layout&font-size in different browser

.header{
z-index:3;
position:fixed;
width:100%;
height:10%;
top:0px;
background-color: white;
}
.header .header-bg {
background-color: rgba(248,221,225,0.7);
display:table;
margin:auto;
height:30px;
width:30%;
}
.header .title-center{
text-decoration: underline;
position:absolute;
margin:0;
left:50%;
top:60%;
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<link rel="stylesheet" href="css/index.css">
<div class="header">
<div class="header-bg"> </div>
<div class="title-center">header</div>
</div>
</body>
</html>
When I developed a web page, I tested it using Chrome. After finishing, I tested it with firefox/IE/Edge, and found the font-size are much smaller than it used to be in Chrome. When I checked the debug tool on Firefox, it seemed that the size of the same div is not the same for firefox and chrome. Actually, the difference is great.
More wierd, when I click into a modal in chrome, and refresh the window, the path changed to index.html#, then, the layout and div size is almost the same as the other browsers.
Anyone has idea why this happened? and How to deal with it? Thanks in advance!!
The following is part of my code for header.
You should add any default font-family in your css after that you can see same fonts on all browser
and add reset css from http://html5doctor.com/html-5-reset-stylesheet/ in header section!
a) Each browser will have their own default font size predefined.
1) For chrome : Setting > Show Advanced setting > Web Content > Font size
2) For Firefox : Tools > Options > Content > Fonts & Color
Whenever the CSS doesn't have font size mentioned in their styles, browser will use their predefined default font size. Better define font-size in your CSS.
b) index.html# issue
Whenever you click on any clickable elements usually anchor hyperlink, browser tries to navigate to that page or section where the href="" if pointing. When a hyperlink doesn't have href="" we'll get "#" as a dummy pointer. Example
Test link or Test link
Refer : https://developer.mozilla.org/en/docs/Web/HTML/Element/a
Each web browser has different defaults for font so you want to reset you CSS before adding your custom style.
Have a read of http://cssreset.com/what-is-a-css-reset/
The problem may be initial values of some elements that differ through browers. The easiest and most reliable way to solve it would be using something like Normalize.css.

Rems doesn't work on mobile devices

I've got a problem with responsive design on mobile devices, please take a look at the code and the pictures. The difference between these two are the font-size of the html root element, I set one with percentage and the other one with px, but the one with percentage doesn't work in the right way while the one with px works just fine. And the numbers in the pictures indicates the width of the red div. According to the first part of my CSS code, the width of the div should be 320px in the first picture, but it is 450 and it will not change unless I set the font-size to a percentage larger than 52.1% or something, I don't remember the exact number, why is that? why the rems do not scale in the right way on mobile devices when setting font-size of root element by percentages? Please help.
HTML
<!DOCTYPE>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<script src = "main.js"></script>
<head>
<body>
<div id="div">Hello</div>
<div id="info"></div>
</body>
</html>
First Css
*{margin:0;padding:0;}
html{font-size:62.5%;}
#div{
width:50rem;
height:50rem;
margin:0 auto;
position:relative;
top:10rem;
font-size:5rem;
text-align:center;
line-height:50rem;
background:#ff0000;
}
#info{position:relative;top:10rem;font-size:5rem;}
#media screen and (max-width:500px){
html{font-size:40%;}
body{background:blue;}
}
Second CSS
*{margin:0;padding:0;}
html{font-size:62.5%;}
#div{
width:50rem;
height:50rem;
margin:0 auto;
position:relative;
top:10rem;
font-size:5rem;
text-align:center;
line-height:50rem;
background:#ff0000;
}
#info{position:relative;top:10rem;font-size:5rem;}
#media screen and (max-width:500px){
html{font-size:6px;}
body{background:blue;}
}
The result on my iphone for the first part of my code
The result on my iphone for the second part of my code
html{font-size:16px;}
body{font-size:62.5%;}
You need to ask yourself 62.5% of what? The default browser font size is html 16px as far as I understand and "The rem unit is relative to the root—or the html—element."
https://snook.ca/archives/html_and_css/font-size-with-rem
In my responsive.scss I used some advice I found recently come to think of it, sorry I don't have the link but the comment in the code is explanatory:
#media only screen and (max-width:320px)
{
/* addresses a Mobile Webkit browsers - Safari & Chrome - issue with text downsizing in portrait mode */
html.touch.webkit,
html.touch.webkit body
{
font-size:22px;
.button
{
font-size:12.8px;
}
}
I hope this helps.

How to prevent mobile devices to scale font size

On our website we have the following phenomenon: When rendering the website on a desktop browser (Firefox, IE, Chrome), all fonts, in particular those embedded in <td> tags, are rendered in the same size.
However, when rendering the website on a mobile device, the font size of the texts within the <td> tags shrinks. See below. We tried to set
html {
-webkit-text-size-adjust: none;
}
but this only helps with the problem on the mobile safari and opera browser. Using the tips from this website, we added
#media (max-width: 960px) {
td {
font-size: 20pt;
}
}
to the css, but this now miraculously only works for one of our phones held tilted sideways, not in portrait.
How do we prevent the font-size within the table cells to be scaled down?
What Olli and JStephen said, but I also had to add text-size-adjust: none;
html,body {
text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
}
You were most likely looking for this:
Include the following <meta> tag in the document's <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">
It helped me with the same problem.
Maybe if you also add body to the css like this:
html,body { -webkit-text-size-adjust:none; }
Resource: iPhone/iPod - prevent font-size-changing
I know this is an old post, but I came across it and found the answer that worked for me is just an extension to Olli's. There are more css styles you have to add to support other browsers:
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
I had originally put everything in table cells which worked on my nexus, but my samsung phone was still randomly deciding which text to scale and which to keep the set size. I set 13px to everything on the page and it was the only font size styling I did. This was the only way I was able to fix it on all the devices I have.
First of all, font-size should be set relative to a default-value that is defined by the html selector, in case of repsonsive formatting.
For example:
html {
font-size: 100%;
}
h1 {
font-size: 2em;
}
td {
font-size: 1.25em;
}
The reason for this is that different platforms use different default values for 100%. E.g. desktops use 16px but mobile browsers often use 24px.
If you define the font-size of one of your elements to an absolute value, it will not scale with the rest of the items that have been assigned no value or a relative value; thus resulting in this behaviour.
The best solution to this problem: use relative font-sizes with em, rem or even % as the unit, istead of the absolute font-sizes with pt or px as the unit.
Edit for more background on the different default font-size on different platforms:
Because each platform has its own use-case, its own average screen size, average reader-to-screen distance, average DPI-value for its screen and (most important of all) a different viewport width, font-sizes aren't equally legible on each of those platforms if set to a fixed size. That's why the browsers define the default size to something different, as to optimise the experience for the user on that specific platform.
Sure, you could ignore this and keep setting all your font-sizes to something fixed, but that's going against the flow and breaking the user experience. Instead, try to make peace with this fact and be sure that it all scales properly.
Edit2: To warn you about the usage of em vs rem: using em will inherit the parent value and multiply it by the value of the font-size you define in your current element, while using rem will always be based on the value that is set in the root element instead of the parent element. So the following code will result in the following absolute values:
HTML:
<html>
<...>
<body>
<div>
<p>..</p>
</div>
</body>
</html>
CSS:
html {
font-size: 100%; /* we agree on 16px for this example */
}
div {
font-size: 1.25em; /* add a quarter of 16, so 20px is the actual value */
}
p {
font-size: 0.8em; /* subtract a fifth of the value of the parent element: 20 * 0.8 = 16 again */
font-size: 0.8rem; /* subtract a fifth of the value of the root element: 16 * 0.8 = 13.8 (will be rounded by browser to 14) pixels */
}