Usage of fonts on a website

design

#1

I'm interested to read what way people consider selecting fonts for their websites.

Is it best to go with stacked system fonts only? As you have the problem of some fonts being in windows and not in mac (and vice-versa).

Maybe having custom font as the first preference in the stack, but then is it best to use an API like Google Fonts or is it better to self-host the font if possible?


#3

System fonts have the advantage of not requiring a latency to download the fonts.

Here is a good article about system fonts.

In my experience, I like to use the free fonts from fontsquirrel.com. Because I can really pick the font that fit the most.

Using custom fonts is a little more advanced and requires more programming skills. In particular, I predownload all the fonts before I make the page visible. And then the fonts are in the cache.

The browser already has lots of fonts that fit lots of needs.


#4

It's not possible to make a general statement as to what is best, choosing fonts depends on how you intend to use them plus some personal preferences come into play, too.

My general preferences are like this:

I prefer system fonts for sites were text is dominant, the aesthetics are not so important and the priority is legibility. This would include forums, admin panels of business applications, documentations, specifications, large tabular data collections, source code, etc.

I choose custom fonts whenever their look is important for site design. Often choosing a good font can greatly increase the aesthetics of a web site and we may decide there's no substitute for a well chosen custom font. As for how to embed custom fonts I prefer to self host, however for quick effects I sometimes use google fonts.


#5

Quite some time ago I adopted the linked reference to bookings.com approach and extensively used something like the following:

body {
  font: 16px/1.2 BlinkMacSystemFont, -apple-system, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
}

Unfortunately the w3.org validation tools show errors and/or warnings for -apple-system so I omitted that font and pleased with the results across all platforms.

Edit:

https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f


#6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.