3 ms·

The advantage of using Arial/Arimo on web pages is that it is the only font which is installed on pretty much every single desktop computer or mobile phone. If

The advantage of using Arial/Arimo on web pages is that it is the only font which is installed on pretty much every single desktop computer or mobile phone. If someone wants a font stack which acts the same everywhere without the overhead of downloading a font, Arial is the only choice (While Android phones do have Tinos, it doesn’t have the same metrics as Times New Roman; go figure). Windows users have had it since the 1990s, Apple has licensed all of Microsoft’s core web fonts, and Linux/Android users have the Arimo font with the same metrics — and it’s a single apt-get command to legally install the actual Microsoft Core Web fonts, including Arial, on desktop Linux. Using Helvetica in a font stack with Linux has issues because many desktop distributions use the Ghostscript Helvetica equivalent font which has vertical alignment issues. Other fonts are often times substituted with different fonts which both change the look and metrics of a web page. The reason why compatible metrics is important is that elements using lettering have the exact same size on a web page, so there aren’t issues with a font overflowing or otherwise looking wrong when it looks fine with Arial. Substituting Arial with Helvetica might break how things look in a web page which assumes Arial metrics. Personally, I wish every computer out there (or at least every browser in widespread use) came with Noto Sans, Noto Serif, and Noto Sans Mono so that something like “font face: Noto Serif” would look and act the same way everywhere, but Arial is as close as we get to that.

quesera 4y ago
> Substituting Arial with Helvetica might break how things look in a web page which assumes Arial metrics. Arial is designed with the same metrics as Helvetica because Arial is a copy of Helvetica. Replacing Arial with Helvetica is just restoring things to the original-not-encumbered-by-licensing-decisions standard. Some people may prefer Arial due to familiarity etc (a distaste for quirky capital Rs?). Some people may not care. But Helvetica is the original.
- strenholme 4y ago
  >Arial is designed with the same metrics as Helvetica Mostly true, as per https://wiki.archlinux.org/title/Metric-compatible_fonts https://wiki.archlinux.org/title/Metric-compatible_fonts but Arimo is designed to have the exact same metrics as Arial, which is important for situations where one is testing a web page/app and can only avoid testing a different font if it’s guaranteed to act in the very same manner. I don’t think Apple guarantees that their Helvetica is compatible with Arial to that degree. Using Helvetica in a font stack on a web page[1] isn’t practical unless one discards that 1-2% of Linux desktop users out there, since they will often get Nimbus Sans which has a different vertical alignment. In terms of the power users with custom CSS which replaces all instances of Arial with Apple’s Helvetica, they are probably clued enough to understand it might screw up the alignment of an element tied to a font’s exact metrics on a web page. I agree it’s unlikely, but I also remember when clients insisted on “pixel perfect” HTML/CSS renderings of their Photoshop-generated layout template. [1] If they have a Helvetica implementation as a .woff/.woff2 web font, this doesn’t apply. I’m assuming that this is a web page which doesn’t have any downloaded fonts.
  - quesera 4y ago
    I think Arial was designed in the 1980's to match Linotype Helvetica (which Apple licensed). Pixel perfect is tough, but a quick lookaround suggests that the two fonts should match glyph widths at least. There are other metrics to consider though, for sure!
toastal 4y ago
Unless you need Arial's specific font characteristics in your stack, please just fall back to sans-serif. I hate these 'system font stacks' that don't fallback to my system because some schmuck thought it would be a good idea to put Ubuntu and Arial in these stacks instead of actually falling back to to the user agent or OS.
Kwpolska 4y ago
Android phones do not have Arial nor Arimo. I tested a simple page with "font-family: Arial, Arimo, serif" and got a serif font. Second, you are overstating the importance of metric compatibility on the Web. Web pages aren’t built with pixel-perfect character placement (unlike PDFs or some GUI frameworks) - text is flowed by the browser, and the web developer cannot specify nor depend on the precise appearance of it, as the appearance of text may differ depending on the browser engine, underlying OS, system scaling, user zoom, accessibility settings etc. "Hello" in 10px Arial takes up 29x10 px on a Windows 11 PC (in Paint), but it might take up a little more or little less 32 px on Linux, or macOS, a different Windows program, or a 150% scale display, due to antialiasing/hinting/rendering technique differences. On a webpage, you wouldn’t make a button containing the word "Hello" precisely 29x10 px — the button would have more breathing space anyway, or it might just have a margin/padding instead of width/height set, and the layout will work even with tiny rendering differences. Also, while a handful of very-badly-designed pages may break if you replace Arial with Helvetica for aesthetic reasons, the bigger crime they simultaneously commit is that they won’t work if you replace Arial with OpenDyslexic for accessibility reasons.
- strenholme 4y ago
  Android phones do not have Arial nor Arimo. I tested a simple page with "font-family: Arial, Arimo, serif" and got a serif font. That’s may be true for Firefox on Android, which has, as per caniuse.com, a 0.28% global usage share. Chrome for Android, which has a 40.28% usage share (well over 100 times the users as Firefox/Android) shows things without serif. There’s also a number of uniwidth typefaces which do not get wider in their bold form, for GUI elements which need to stay the same size (a use case which we should not completely dismiss as bad design), but those need to be downloaded as .woff/.woff2 fonts.
  - Kwpolska 4y ago
    I re-tested with Chrome, and got Roboto, which is clearly not Arial nor Arimo and is not metric-compatible. And it was triggered by the name Arial.
strenholme 4y ago
As per the discussion, it looks like Android has moved from using Arimo for “Arial” to using Roboto for “Arial”, which has different metrics. Point being, here in 2022, if one wants a font to preserve metrics across platforms, one needs to provide the fonts as relatively large .woff/.woff2 files. There is no longer a universal font stack out there.

quesera 4y ago

> Substituting Arial with Helvetica might break how things look in a web page which assumes Arial metrics. Arial is designed with the same metrics as Helvetica because Arial is a copy of Helvetica. Replacing Arial with Helvetica is just restoring things to the original-not-encumbered-by-licensing-decisions standard. Some people may prefer Arial due to familiarity etc (a distaste for quirky capital Rs?). Some people may not care. But Helvetica is the original.

strenholme 4y ago
>Arial is designed with the same metrics as Helvetica Mostly true, as per https://wiki.archlinux.org/title/Metric-compatible_fonts https://wiki.archlinux.org/title/Metric-compatible_fonts but Arimo is designed to have the exact same metrics as Arial, which is important for situations where one is testing a web page/app and can only avoid testing a different font if it’s guaranteed to act in the very same manner. I don’t think Apple guarantees that their Helvetica is compatible with Arial to that degree. Using Helvetica in a font stack on a web page[1] isn’t practical unless one discards that 1-2% of Linux desktop users out there, since they will often get Nimbus Sans which has a different vertical alignment. In terms of the power users with custom CSS which replaces all instances of Arial with Apple’s Helvetica, they are probably clued enough to understand it might screw up the alignment of an element tied to a font’s exact metrics on a web page. I agree it’s unlikely, but I also remember when clients insisted on “pixel perfect” HTML/CSS renderings of their Photoshop-generated layout template. [1] If they have a Helvetica implementation as a .woff/.woff2 web font, this doesn’t apply. I’m assuming that this is a web page which doesn’t have any downloaded fonts.
- quesera 4y ago
  I think Arial was designed in the 1980's to match Linotype Helvetica (which Apple licensed). Pixel perfect is tough, but a quick lookaround suggests that the two fonts should match glyph widths at least. There are other metrics to consider though, for sure!

toastal 4y ago

Unless you need Arial's specific font characteristics in your stack, please just fall back to sans-serif. I hate these 'system font stacks' that don't fallback to my system because some schmuck thought it would be a good idea to put Ubuntu and Arial in these stacks instead of actually falling back to to the user agent or OS.

Kwpolska 4y ago

Android phones do not have Arial nor Arimo. I tested a simple page with "font-family: Arial, Arimo, serif" and got a serif font. Second, you are overstating the importance of metric compatibility on the Web. Web pages aren’t built with pixel-perfect character placement (unlike PDFs or some GUI frameworks) - text is flowed by the browser, and the web developer cannot specify nor depend on the precise appearance of it, as the appearance of text may differ depending on the browser engine, underlying OS, system scaling, user zoom, accessibility settings etc. "Hello" in 10px Arial takes up 29x10 px on a Windows 11 PC (in Paint), but it might take up a little more or little less 32 px on Linux, or macOS, a different Windows program, or a 150% scale display, due to antialiasing/hinting/rendering technique differences. On a webpage, you wouldn’t make a button containing the word "Hello" precisely 29x10 px — the button would have more breathing space anyway, or it might just have a margin/padding instead of width/height set, and the layout will work even with tiny rendering differences. Also, while a handful of very-badly-designed pages may break if you replace Arial with Helvetica for aesthetic reasons, the bigger crime they simultaneously commit is that they won’t work if you replace Arial with OpenDyslexic for accessibility reasons.

strenholme 4y ago
Android phones do not have Arial nor Arimo. I tested a simple page with "font-family: Arial, Arimo, serif" and got a serif font. That’s may be true for Firefox on Android, which has, as per caniuse.com, a 0.28% global usage share. Chrome for Android, which has a 40.28% usage share (well over 100 times the users as Firefox/Android) shows things without serif. There’s also a number of uniwidth typefaces which do not get wider in their bold form, for GUI elements which need to stay the same size (a use case which we should not completely dismiss as bad design), but those need to be downloaded as .woff/.woff2 fonts.
- Kwpolska 4y ago
  I re-tested with Chrome, and got Roboto, which is clearly not Arial nor Arimo and is not metric-compatible. And it was triggered by the name Arial.

strenholme 4y ago

As per the discussion, it looks like Android has moved from using Arimo for “Arial” to using Roboto for “Arial”, which has different metrics. Point being, here in 2022, if one wants a font to preserve metrics across platforms, one needs to provide the fonts as relatively large .woff/.woff2 files. There is no longer a universal font stack out there.