Subpixel and letter-spacing

Question

I would like to use letter-spacing on my headings. The headings are responsive: at smaller screen sizes, the headings have a smaller font-size. Therefore it makes sense to use em for the letter-spacing measurement.

I've noticed that this results in subpixle letter-spacing. It appears fine in Firefox, Chrome and Safari on my Mac, but will it work across all browsers? Or will some (older) browsers round to the nearest pixel?

I want to avoid browsers rounding down to zero - therefore ignoring the letter-spacing. Or rounding up to 1 and the letter-spacing being too loose.

I read this post from several years ago, which implies browsers rounded subpixles Web-Kit and sub-pixel values, workaround?

h1 {
    font-size:7.2rem; /* equals 72px */
    letter-spacing:0.01em; /* equals 0.72px */
    }

The computed size is in pixels: 72px. So the letter spacing of 0.01em = 0.72px letter spacing. My question is will all/most browers cope with sub-pixels? Or will they round them? — user2991837, Jul 29 '19 at 09:26
Could your questions be reworded to "Is there currently any browser that does not use subpixel text rendering?"? What exactly you want to ensure, achieve or prevent? — myf, Jul 29 '19 at 09:44
@myf is there currently any browser that does not support subpixel letter-spacing?? — user2991837, Jul 29 '19 at 11:33

score 2 · Answer 1 · answered Jul 29 '19 at 13:15

2

Following more research it appears that modern browsers do support sub-pixel letter-spacing see https://css-tricks.com/almanac/properties/l/letter-spacing/

answered Jul 29 '19 at 13:15

user2991837

626
1
8
17

Subpixel and letter-spacing

1 Answers1