- This topic has 5 replies, 2 voices, and was last updated 3 years, 5 months ago by
.
-
Posts
-
With reference to: https://generatepress.com/forums/topic/switching-from-floats-to-flexbox-font-issue/
So is it intended behaviour that switching to flexbox changes the appearance of typography?
It’s very noticeable on a site I’m trying the flexbox option out on – like changing down a whole weight (e.g. 400 to 300).
Does this affect particular types of display more than others? i.e. Will it affect standard resolution displays more because more antialiasing is needed on a display with lower pixel resolution?
Just want to understand the implications before I look into switching my first site over. Thank you! 🙂
Customer Support
Hi there,
GP 3.0 Flexbox introduced font smoothing which is added by this CSS:
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }This brings it inline to what is a fairly common standard and sites such as Google Fonts use it in their site preview.
The benefits of it may be more noticeable on lower resolution screens where less pixels can lead to jagged edges.
Thanks David,
So I’m more likely to notice the difference on a standard 1080p monitor than most visitors will, because they’re going to be on retina-type phone screens?
Thats correct, the major factor being the screens pixel density vs the screen size.
Small HD/Retina screens will have a much higher pixel density, which results in smaller pixels therefore a smoother output to begin with.
Whereas a large 32″+ 1080p monitor will have much larger pixels than say a 20″ 1080p monitor for example. So anti-aliasing will benefit the 32″ screen more than the 20″.Having said that – antialiasing can be a benefit on all devices.
Small heavier weight text ( such as in your Navigation ) will look less filled in.
Light weight text as in your Learn More button will be finer.
Curves on your serif font Headline will be smootherIf you want to see the difference on your current monitor, open the page in Chrome, Right Click > Inspect to open the dev tools, select the top
<HTML>element in the Elements tab, and in the Styles panel uncheck the CSS Classes i shared herePerfect, that’s really helpful, thank you. I think it makes sense to stick to the default for new sites unless I have a really good reason. So I’ll just test this site out on a few displays and see whether I need to tweak any weights with the anti-aliasing switched on.
Thanks so much for the quick replies! 🙂
You’re welcome – glad to be of help.
- You must be logged in to reply to this topic.