4

It's already 2019, iPhone retina invented near 10 years, as you may know, you can now use 0.5px as border width in CSS3, and most of iPhone and Android devices can correctly solve it as 1px in retina screen.

My question is, if I specify font-size: 12px, actually it will show a font size with 24px in retina screen. If I want to show 25px font in retina screen, can I use font-size: 12.5px? Thanks!

I asked our UI designer, she said she will use 750px as width when designing for mobile. So that means if she set a text font size as 28px, I will divide it by 2, so I should use 14px in my css, right?

But that bring another question: the UI designer can only design by 22px, 24px, 26px, 28px and so on, so I can divide by 2, to get 11px, 12px, ... in css.

If UI designer set font size as 25px, we cannot use 12.5px in css. I've tried to set font-size: 12.5px, but it won't work, browsers simply convert it as 13px.

How to exactly set it as UI picture?

@Josh Lee, Thank you very much! I tried your code in desktop Chrome browser, it shows like below:

desktop chrome

This is great! However, if I run the code in Safari of the newest iPhone iOS 12.3.1, it shows as below:

ios safari

You can see that iPhone still cannot correctly show .5 font size, it will either change it to 12px or 13px, just cannot be 12.5px.

I also tried the code on Android Chrome, it shows correctly.

iPhone really sucks.

Zhang Buzz
  • 10,420
  • 6
  • 38
  • 47
  • 2
    Why would you want it to be 1 real px on retina? I would leave technical size out of perceivable size. I would rather enjoy image quality, than messing with UI design. I'd use `@media` for special retina cases and use PX as integers. - Short answer: you *can*. – Roko C. Buljan Jul 12 '19 at 00:28
  • You can zoom Chrome to 200% to find out (or use the device emulation mode). – Josh Lee Jul 12 '19 at 00:36
  • Or simply try this demo: https://jsfiddle.net/fo4egv7n/ does the font size changes when PX are in decimals? – Roko C. Buljan Jul 12 '19 at 00:43
  • 2
    Pixel perfect designs went out of style in this century, try telling this your UI designer ;) – cloned Jul 12 '19 at 06:46
  • @FelipeAlamedaA REM will finally convert to PX to show on screen, so even I use REM, it calculate a result of 12.5px, it will still show 13px in mobile browsers. – Zhang Buzz Jul 12 '19 at 06:50
  • @ZhangBuzz Looks like Safari and iOS don't support this. – Josh Lee Jul 16 '19 at 15:01

1 Answers1

5

A fractional px font size is perfectly valid.

Modern browsers perform layout with device-independent floating-point values, and there are few-to-no differences between running on a high resolution (2x, 1.25x, etc.) display and setting the zoom level in a browser.

You should be aware that certain values are rounded to whole pixels, such as borders, and this difference might manifest in subtle ways.

As an illustration, Firefox reports 1px for the computed border width of all these, while Chrome does not. A box made purely of border width might layout differently in Firefox and Chrome — there's a tradeoff at play here.

Also as an illustration, do a Find in Page for "px" and look at the ragged border of the highlight — it smoothly moves to the right rather than jumping at a certain point.

Edit: And Safari (on Mac) is indeed the odd one out, apparently rounding the font size to a whole number for display (but the computed value is still fractional).

document.querySelectorAll('span').forEach(span => {
  const {width, height} = span.getBoundingClientRect();
  span.textContent += `\t${width}x${height}`;
  const {borderTopWidth} = getComputedStyle(span);
  span.textContent += `\t${borderTopWidth}`;
});
span {
  border: 0.08em solid silver;
  white-space: pre-wrap;
}
<div style="font-size:12.0px"><span>font-size:12.0px</span></div>
<div style="font-size:12.1px"><span>font-size:12.1px</span></div>
<div style="font-size:12.2px"><span>font-size:12.2px</span></div>
<div style="font-size:12.3px"><span>font-size:12.3px</span></div>
<div style="font-size:12.4px"><span>font-size:12.4px</span></div>
<div style="font-size:12.5px"><span>font-size:12.5px</span></div>
<div style="font-size:12.6px"><span>font-size:12.6px</span></div>
<div style="font-size:12.7px"><span>font-size:12.7px</span></div>
<div style="font-size:12.8px"><span>font-size:12.8px</span></div>
<div style="font-size:12.9px"><span>font-size:12.9px</span></div>
<div style="font-size:13.0px"><span>font-size:13.0px</span></div>
<div>&nbsp;</div>
Josh Lee
  • 171,072
  • 38
  • 269
  • 275