I’ve been musing on this for a while and am coming to the conclusion that loading additional fonts, in many cases, is pointless.
In my particular case we use Roboto, as that is specified in our brand guidelines. But this seems pretty redundant to me when Arial is so similar that I doubt many people would notice any difference what so ever.
you can see the 2 fonts side by side on my test
The are of course very minor differences but would any general user either notice or care? All it seems we are doing by using Roboto is adding in additional file downloads and therefore increasing load times.
Of course if we were using a fancier font I could see the point but it’s such a basic font I can’t see the point.
Anyone else share this view? or have any thoughts that I should be aware of in my thinking?
Arial - designed for Monotype, distributed by Microsoft and Apple since the early 90s.
Roboto - designed for Google, distributed as a system font for Android.
I cant imagine why those two things might exist independently of one another, or why anyone would ever need to have a (legally) distinct font from another (highly litigious) organization’s when distributing a new product in the same field…
ah yes, I’ve updated the codepen and allowed the 2 paragraphes to run into each other. The end of Roboto para has ‘Roboto’. For me I don’t think I would even notice the change (I’m pretty sure it is rendering the correct fonts).
Removing all of the differences you created in the CSS, yes, they’re functionally the same. The Arial’s a bit weightier, for whatever reason, but its a very minor difference that you only notice by doing a direct comparison like this.
One advantage of the Google font is that you have more options. You’re loading various different font weights, for example, so you can display your text at font-weight: 300 or 500 with Roboto, but doing the same with Arial won’t have any effect.
Roboto also has specifically designed italic versions, which might be nicer than the browser-rendered ones for Arial. (Again, I haven’t checked if Arial has its own.)
You may also have various characters available with Roboto that you don’t with Arial (I haven’t checked).
To get a better idea of the comparison, I’d want to see all the options for both fonts displayed before deciding that there’s no advantage using the online font.
Of course every extra weight incurs further overheads to download and if you don’t download the extra font-weights you want the browser may try and approximate them (such as when using bold) and you will get a fuzzy looking font.
I don’t like the 300 at all and it’s much harder for me to read (because I’m old)
I’m not a fan of downloading extra fonts just because the author thinks they look nice. Of course if a company already has a brand in a special font then that would be a good reason to maintain that appearance. I still tend to think of the web as a place to get information quickly rather than looking lovingly at fonts That still doesn’t mean the site has to look rubbish though!
Being a bit of a typography geek, I enjoy a good looking font, so I enjoy seeing the different fonts being used. A good font choice can add personality, or gravitas where appropriate. A nice handwritten font for a poetry, or a futuristic font for a sci-fi movie site can add something to the experience.
Roboto was a font specially made for the web - Arial was not. Plus MS has the copyright on Arial, so it couldn’t necessarily be used on things like Linux and such for a while. Roboto was developed as open source so it could be used everywhere - back when the big G’s motto was “Do no evil”
Can it be abused? Absolutely. Someone who mixes and matches without any sense of typography can make a site hard to read. Or too many different fonts that slow a site down.
Are there some ugly “fonts” out there? Absolutely. Some of the fonts that add extra swoops or glyphs just for style make things hard to read.
But as someone who grew up before the common web where you got what the machine could show, nice typography is an enjoyable experience.
I think this touches on many of the points I was thinking. We are trying to make our website available to global audiences some of which may not have great internet connectivity.
So it would seem logical to me to not load additional fonts if I don’t have to, when the default is almost identical. As others have said though obviously using more complex fonts for design there isn’t really another way and it would be better than the very old school way of having them as images.
It’s useful to know that you find ‘thin’ ‘300’ weight difficult to read as that also comes into our remit of ensuring assessability.
From what I now understand Android doesn’t have Arial. So it would use Roboto as that is the likely pre-installed default.
If I were to rely only on pre-installed fonts would it therefore be best to specify the font family as
font-family: Roboto, arial, sans-serif,
And allow it to fail on Roboto for non-android devices and fallback to arial or the other way around
font-family: arial, Roboto, sans-serif,
I am assuming that if the font specified is not found and a fallback font is used there will be so little latency in the browser making this change that it will be barely measurable? And there would be no flash of unstyled content?
That would mean you’re showing Roboto to your android users, arial to your Windows and IOS users and san-serif to everyone else. That doesn’t seem ideal to me, and it has the remote possibility that it could affect the rendering of your site - the two fonts are close in size, but not exact so the potential is there for overflow or some other kind of rendering issue to occur.
If you’re going for a consistent experience, and you’re only going to use one font, then why ignore the capabilities of using a web font like Roboto. If you download ALL of the Roboto fonts, it’s 1.5MB. You’d be using a limited subset so the impact is lower. And the files will get cached after the first load so the hit is not outrageous after the first page load.
This (IMHO) is one time that consistency should override a small bit of optimization.
I agree with you in principle but my thinking is that the aim of our website is to reach as many people as possible as it is health related information. So I’m trying to balance the aethetics of the site vs reaching more people. Perhaps someone on an old mobile in a rural area with very poor internet in many different countries.
If I was selling something in the UK etc I wouldn’t worry about the extra burden but in this case I find myself having to think about it a little more.
It might take a lot of checking but if the site is coded to be fully RWD it shouldn’t matter if the font shifts slightly as it should just reshape to fit any movement. Not much different to someone setting their font size to be larger.
hmm perhaps a bit of testing on different systems to see what will happen is needed.
Some research into your numbers might be useful as well. If you’re talking 5-10% of your people, then yeah. But if it’s 5-10 people out of a thousand, does it make sense to lessen the experience for .5 - .1%, when all it’s really going to do is take slightly longer to load.
I do want to point out you’re talking a MAX of 1.5MB (if you include ALL of the roboto font variants) - this is not a 100MB image or video that needs to be drastically optimized.
In my view designers of websites pay too much attention to fonts. When I look at a web page that uses a sans-serif font I am completely oblivious of what font is being used.
If using a web font I would be far more concerned about cumulative layout shift than the precise shape of each character. Although It’s trying to sell a product, this article describes quite well how layout shifts can occur. It also describes how CSS font-display can be used.
I would only use a web font for a company name, section heading or caption; perhaps also for text on buttons. However I recognise that if a website is aimed at children or teenagers then a fancier font may be appropriate for paragraph text. Also a stylish font may be suitable for the website of an aethetic designer or artist.
I had a designer who kept doing mockups using Adobe specific fonts, then would get upset when I couldn’t make the pages look like he wanted. That caused QUITE a few go arounds until I could get him to see that those couldn’t be used for the web.