The Advantage of System Fonts and How To Use Them in Your Website
In my first quarter of film school (what feels like a lifetime ago now), I took an introductory typography class. This was for an undergraduate degree, so while I was there to learn about filmmaking, there were still some vaguely related classes that I had to take to graduate.
The class covered the basics of typography, including the history of typefaces, the characteristics of letters, and what makes a typeface both legible and pleasing to the eye. The class was about as good an introduction to a subject as you can get and I created pieces that I still have around the house somewhere.
It would have been nice if past Sean had appreciated the class more than he did because present Sean really enjoys learning about and experimenting with typefaces.
Past Sean was never good at predicting the future.
Present Sean, however, has a better idea of what he wants and what he likes (and Future Sean is just a mystery). I’ve spent a good amount of time working on design projects since finishing that typography class all those years ago. I’ve grown and I’ve discovered that flashiness isn’t too appealing to me.
What I enjoy now, and indeed what I crave to see in my design and those by others, is simplicity and a clear expression of ideas. If I look at something, say a website or a print ad, I want one of two things:
- To not notice the design of a thing at all because it works so damn well that I can just focus on its content.
- To be so bowled over by the design of a thing because it also works well and is intended to amaze and delight, but doesn’t lose sight of its content.
Anything else would feel like an assault on my senses. When it comes to websites, because that’s where my business lives, I have an emerging desire to simplify, simplify, simplify. I’m tired of the websites that are full of a mishmash of junk and cause my computer’s fans to spin up because they’re bogged down with crap.
I want a calming experience and I believe typography can be a powerful tool to help accomplish that.
What’s influencing these feelings?
When it comes to typefaces… fonts… whatever you want to call them (although, there is a distinction between the two), I like to refer to myself as a lover and not an expert. I couldn’t rattle off the definitions of x-heights, ascenders and descenders, or hairlines without giving those words some thought. However, I know what I like and what I don’t like, and so far, that’s been good enough for me.
That being said, I did just watch the Jonathan Hoefler episode of the Netflix show, Abstract: The Art of Design, and now I’d like to learn a lot more about typography. It was a great episode about a fascinating man who really knows his stuff and has a great on-camera personality.
I also have a clear and devoted interest in minimalism, both as an aesthetic and, more importantly, a mindset. A clean and ordered space is not just pleasing for me to look at, it also brings me a sense of calm. There’s not going to be a Netflix show made about my interest anytime soon, but I don’t think I’ll ever stop evangelizing the benefits of minimalism.
It’s never been more clear to me that good, clean design can make a world of difference with, well, anything. When it comes to websites, it’s what makes a website like Dandy Cat Design look better than something that’s stuffed with anything that can be stuffed into it.
Keep this in mind the next time you set out on a design journey: just because you can do something doesn’t mean you should.
I’m sure you get the point by now. Good design is a hard thing to accomplish, but there are a couple of rules to follow that can help get you there:
- Be intentional with your design. Step one is to sit down and really think about what you want to accomplish with your work. I mean, really ponder over it. Don’t stop until the message of your website, image, ad, whatever is as clear as can be.
- Do less than you think you should. Don’t just throw an image into something because you can. Keep yourself from using bunches of different fonts just because things should be “jazzy” or whatever. Don’t think that your work has to be weighed down with junk to make it look full of effort. Clean design is always appealing and still hard as hell to do right.
Intentional, clean design is what separates work that draws people in and work that pushes them away. Using too many typefaces, a multitude of colors, and cramped layouts can make anything look like a disaster.
How are these interests manifesting themselves?
My two interests, typography and minimalism, bleed into the current appearance of Dandy Cat Design and my future musings about the look of my work. In the past, I used a font called Nunito in my website and most of my other design work. I really like the font because of its playfulness and how clean it appears to my eye. It was a great accompaniment to the personality of my business.
However, I also adore typefaces like Helvetica and San Francisco. They’re eminently readable and have been used for countless applications for many years. Are they the flashiest typefaces out there? No, of course not. In many ways, they’re not supposed to be.
Let’s dig into the San Francisco typeface. It’s the current system typeface for all of Apple’s devices, so it is, by definition, designed not to be flashy. It needs to be legible for as many Apple device owners as possible. There’s no room for typeface jazz when billions of dollars are in the mix.
System fonts tend not to be thought of as viable tools for design for a simple reason: they lack personality. I’m sure you could find many people who would say that a website should be an extension of its creator’s style and should reflect the spirit of the business.
I get that, but I also think that the content that’s created for a website should be its reason for existing. To that end, I want my ideas and my words to take center stage. To be frank, I think that should be the most important consideration for any website.
How can you use system fonts in your web design work?
This step, luckily, is easy-peasy.
System fonts have been on my mind for a while because of their ubiquity and speed (and also thanks to how the MacStories website has evolved). I’ve been talking about my goal of creating the speediest website since I first moved everything over to Ghost. I want to have a site that aces all the page speed tests out there. A website needs to be lightweight to accomplish that feat, and custom fonts do not help to speed up a website.
When you use a custom typeface, a browser needs to load the files associated with the fonts that are being used throughout your website. If you’re only using a couple of fonts from a single typeface, then that hit may be minimal, but start using more than that and suddenly a browser is going to have to load additional megabytes when someone goes to your website.
Megabytes! Nobody’s got time for that.
Internet speeds have improved over the years, but not in all parts of the world, so those megabytes could take mega time to load. If you’ve also got images on there, then… oof.
Because of this, my website project roadmap included the removal of custom typefaces and the use of system ones. Did the personality of my site take a hit? Most likely, but what good is personality if visitors navigate away from my site out of load speed frustration before they ever see my typeface?
I can still use custom fonts all I want in my images, but for the text that’s rendered on my website it’s now something far more standard.
That easy-peasy thing I mentioned earlier? Here it is. Adding this bit of code to your site’s CSS should do the trick (although, be aware that this list can change as typeface choices are updated):
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}This means, for the body selector, the browser should try to render text in whichever system typeface it’s capable of rendering first. If you’re using a current Mac or iOS device, the browser will render in -apple-system, or San Francisco as of this writing. If you’re using a Windows device, it’ll be Segoe UI. If all of them fail, whatever sans-serif font is default to the browser will be used.
The typeface that’s used is already present in whatever system your website visitor has, so no additional resources will need to be loaded. Talk about a time saver! Sometimes even full seconds can be saved, depending on a visitor’s internet speed.
When it comes to the internet, every single moment counts.
Typography is indeed a fascinating subject, and one that spans centuries. Since even before the invention of the printing press all the way back in 1440, typography has been an important consideration for the written word. It’s what brings form to letters and interest to the page.
It’s several centuries later now and typography is as just as important as it’s ever been. Sure, most text is now displayed on screens, but that doesn’t mean careful consideration of good typography is any less essential.
I feel that system fonts tend to cover the basics of good design: they’re easily understandable and they get out of the way. They’re not fighting for your attention, instead they support the content of a website (or app) by being as accessible and invisible as possible.
I’m fascinated by them for that reason. I use them in my work because of their sneaky utility. You should consider them for that very same reason.
Be clean and intentional, cats.
