Accessibility, different languages and the consistent look

Yesterday, at the IndieWeb Camp Berlin, we had a double session about the accessibility. One of the points was, that we should not be setting the base font size and font family and similar things in the CSS files.

The reason for this is, that the people could be setting their own preferences in the settings. The vision impaired could set the bigger fonts sizes as the default. The people with reading problems could be setting the default font, that would make the reading at least a bit easier. Or they could be setting their own background and the font color. There are probably many more settings, that I am not aware of.

If the website set the default font size in pixels or the default font family in the CSS, then these settings can not take affect. As far as I am aware, this is not a particular good user experience.

This is how the problematic part looked in my CSS file:

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 17px;
}

For my case, this was simply a left over from the original template, that I never removed until now. If removing something like that from the CSS file could improve somebody's life just a tiny bit, why not do it.

But what I do on my website, is that I am mixing different languages, sometimes even inside the posts. But on the list of all posts, the posts in different languages can be seen next to each other.

The first thing to know is, that different writing systems have different font size and font families setting. So somebody can have Latin characters in the font size 48, and the Japanese characters in the front size 16. I am giving this example, because this is the one, that I tested with. I did not know, that Japanese have their own settings.

Even if both of them are of the same font size, that does not mean they appear equal size on the screen. This is simply because they are using the different fonts. These differences disappear, if if all of the writing systems are set to the same font.

But that is something that each person would need to set, so not something I can depend on.

But I was also interested, why are the dates next to the titles look different. If there is a small difference between different fonts, this is not that noticeable, but if there is a difference in the numbers placed one above the other, this becomes a lot more noticeable.

What I realized is, that what the browser is using for this is the lang attribute of the HTML element. So making the original Japanese element to the English one, it is possible to make everything the same size.

But the lang attribute is important for the translation perspective, so I do want to keep it in.

My solution on the end was, that I am not really bothered by these differences. And if any of the users have really funky settings, then there have to be a reason for this. But I do wonder how more design oriented people would try and resolve this situation.