Font sizes should be ems or %, never px about twentynineteen HOT 10 CLOSED

I generally tend to agree, however Gutenberg does use px font sizes, and we've adopted them here in order to maintain 1:1 font size consistency in the front and backend.

(If someone has another solution, I'd welcome a PR!)

from twentynineteen.

If the editor inserts styles for font sizes, that has nothing to do with the theme.
The line quoted is for the html tag. This should be 100%, so that the user gets the font size he chose in his browser.
But other references to pixel sizes should not be used. Really, there is not much need to set font sizes except for headings as ems, and <big> and <small> which should be %.

from twentynineteen.

As em and % are both relative units, they need a value to be relative to. So using a fixed font-size in px is usually the way to go. Having the fixed size (only) on the html tag is good practice.

The size of the text can easily be increased by the browser, even if defined in px, which is very important for the a11y. Setting the font-size to 100% would result in a size of 16px in "most" browsers, but is not a reliable value to use relative units from.

from twentynineteen.

Setting the font-size to 100% would result in a size of 16px in "most" browsers

Yes, this is what is needed, because those that have changed their default size have a reason to do so. Setting it to a fixed px size means that you override what the user chose. This is a concern for accessibility, for those that have low visual acuity and set their default sizes to larger. Just this weekend, I was helping an elderly man who had problems with his retinas, and had to set his browser font size up to quite large to see well. By setting it to 22px, it would ignore his setting, and he couldn't read it.

from twentynineteen.

The font-size in the browser is usually scale "relative" and not absolut to a different value, so setting the size to 22px it also perfectly fine, if a user zooms. Also the browser zoom (using CTRL and the mouse wheel or +) is also zooming relative.

from twentynineteen.

As an alternative to just having px, we could use it together wirh rem:

html {
    font-size: 22px;
    font-size: 1.375rem;
}

from twentynineteen.

You miss the point. Using px on html is not accessible. It disregards the user's choice. If you use 100%, you will get what the user chose for himself. Most users do not change it from 16px. But those that do change it do it for a reason.

from twentynineteen.

I totally got your point. In all modern browsers, the font-size is increased using the general zoom functionality. This will also increase the "reference pixel". So even if you set the font-size to a fixed px value, the text will be larger.

Only Chrome and Firefox still have a (quit hidden) setting, where you can increase the actual root element font-size in pixel, but using a fixed value and a relative value would also do the job.

If you increase you font-size using the OS settings, this will also result in a larger text in the system browser (Edge and IE on Windows), even if px were used.

So many posts about accessible font-sizes say px are fine to use, if you make sure the website can be zoomed.

https://webaim.org/techniques/fonts/#relative
https://mindtheshift.wordpress.com/2015/04/02/r-i-p-rem-viva-css-reference-pixel/

from twentynineteen.

No, you still missed the point. It's not about whether the zoom works, which with modern browsers is not a problem anymore. It's about the fact that each user can set it to their need, so every site they visit is large (or small) enough for their comfort. When you use px, you override the user's choice, which is usually because of a visual deficit. That is not a good experience for the user. In my case, I chose 15px, but I see the set 22px, and it looks awful. It feels like I can't see enough, like I have a really low resolution monitor that can't show me very much of what I should be seeing. For my friend with retina problems, it is way too small for him to read.

You could use 105% or something, but still, it should be a percentage so that the user gets what he already chose.

Testing should always include using the Ctrl - and Ctrl + keys to see that nothing breaks when the user zooms in and out. But the end user should not have to zoom in and out by default. They should get what their browser is set to.

from twentynineteen.

We're in the process of closing down this GitHub repository now that the theme is merged into core, so I've migrated this issue over to Trac:

https://core.trac.wordpress.org/ticket/45899

I'm closing this issue a result. Please feel free to follow up in the new thread moving forward.

from twentynineteen.