Yet another Webcompat issue with the characters being cut in the bottom, this will join the other ones, such as cross characters not well centered in a rounded box and many other cases. What about it?
The sans-serif issue
All of these have the same pattern. They rely on the intrinsic font features to get the right design. So… this morning was another of this case. Take this very simple CSS rule:
.gsc-control-cse, .gsc-control-cse .gsc-table-result {
width: 100%;
font-family: Arial, sans-serif;
font-size: 13px;
}
Nothing fancy about it. It includes Arial, a widely used font and it gives a sans-serif fallback. It seems to be a sound and fail-safe choice.
Well… meet the land of mobile and your font declaration doesn't seem to be that reliable anymore. Mobile browsers have different default fonts on Android.
The sans-serif doesn't mean the same thing in all browsers on the same OS.
For example, for sans-serif and western languages
- Chrome: Roboto
- Firefox: Clear Sans
If you use Chinese or Japanese characters, the default will be different.
Fix The Users Woes On Mobile
Why is it happening so often? Same story, the web developers didn't have time, budget to test on all browsers. They probably tested on Chrome and Safari (iOS) and they decided to make a pass on Firefox Android. And because fonts have different features, they do not behave the same to line-height, box sizes and so on. Clear Sans and Roboto are different enough that it creates breakage on some sites.
If you test only on Chrome Android (you should not), but let says we reached the shores of Friday… and it's time to deploy at 5pm. This is your fix:
.gsc-control-cse, .gsc-control-cse .gsc-table-result {
width: 100%;
font-family: Arial, Roboto, sans-serif;
font-size: 13px;
}
Name the fonts available on mobile OS, you expect the design to be working on. It's still not universally accessible and will not make it reliable in all cases, but it will cover a lot of cases. It will also make your Firefox Android users less grumpy and your Mondays will be brighter.
Otsukare!