These font stacks will improve your site performance
Вставка
- Опубліковано 8 чер 2024
- Feeling pretty good with your CSS and looking to take the next step up in your game? This course might be what you’re after 👉 beyondcss.dev/?...
Web fonts have made the web a much nicer looking place, but if we don’t put the work in to host them properly and optimize them, they can be heavy files that slow things down and lead to FOITs and FOUTs, which is never great for the user experience.
Luckily, modern font stacks can help a lot with that!
🔗 Links
✅ Modern Font Stacks: modernfontstacks.com/
✅ How website performance affects conversion rates: www.cloudflare.com/learning/p...
✅ My video on self-hosting Google Fonts: • Self-hosting fonts exp...
⌚ Timestamps
00:00 - Introduction
00:30 - The problem(s) with Google Fonts
01:40 - the best font to start with
02:26 - simple font stack for system-ui
03:35 - The “original” system-ui stack
05:00 - Advantages of system-ui
06:09 - Other font stacks that take advantage of system fonts
07:30 - Different fonts across different operating systems is okay
09:35 - Use web fonts where users will actually notice them
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my UA-cam channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
If you're going to complain that we need nice fonts for any range of reasons, please watch to the end before jumping to conclusions, because I do address this, including a nice compromise to using both system and web fonts.
When I worked on an international brand's website and had to support multiple languages, we had to conditionally load different font-family stacks based on that locale. Depending on the locale, a fall back system font may not always be the best solution as that font might not have the correct glyphs for that language.
This was amazing. It always killed me using custom fonts because of the bloat, but everyone is doing it on every proj and design. This video makes me feel so much better. This def could be a short with a clickbait title just to get the info out to people that think they already know about fonts.
Ok, I'll watch to the end.
It took me until today to realize Kevin is saying “hello my front-end friends” and not “hello my friend and friends” and I’ve watched all of his videos.
WHAT
It's because of the closed captions that I realized too.
Mind. Blown.
Whaaaat? I swear he never said that in any other videos! And if he did it's because he just went back and changed it!
Convincing designers to use System Fonts is a scary proposal.
it's impossible. it's like asking a pig falling from the top of golden state bridge to live
It makes sense for the first you see in the center of your home page to be a predictable font and weight. Other than that I wouldn't even tell them I'm using a different font.
We need different things in the web. Does anyone remember how many websites resembled bootstrap back in the day? Not nice. Difference is key.
@@xbsidesx You say that, but most people don't care. Yes, variety can be nice, but just having a decent font is generally enough.
I guess there's no point in advocating custom designed fonts outside of wordmarks 😉
Next.js did great thing on their next/font package. It allows to automatically self host a font, but also provides automatic zero shift fallback for when main font has not loaded yet
Typography doesn’t matter to devs. Working with brand agencies for 15 years, I can tell you it absolutely matters. Also, system ui fonts are not chosen willy nilly. The system itself is brand driven.
Well aware they aren't picked willy nilly, which is why they're a nice choice, as they're nice fonts :)
I still think going with a branded font for the headings and large sizes, and a system font for body text is a really nice compromise. I do realize it can be an uphill battle with designers tho :D
@@KevinPowell Agree. Just to be clear, my point is seen from a brand/product perspective. 9/10 times a brand will stay on bran therefore system fonts are never a compromise. For the average app or general use case, devs can go wild.
what i often seee with devs and typography is they dont change the default line-heights and that makes even the best text look like shit
I think there is only one decision possible and either you go down the optimized speed route or the designer's route who hand pick fonts to match brands and design aspects of the clients. Means for each project you have to consider what the client wants, if they are after best page performance, then of course a system-ui font will maybe the right thing.
"The system itself is brand driven." Yeah, some else's brand.
This is super insightful, specially your final point I think it's spot on. Thank you as always, Kevin!
I'm currently working on migrating my website from a 3rd party to a self-hosted setup.
And I have not bothered picking a font yet, so this showed up in a really convenient time for me.
Despite knowing my way around css, I'm not really a web developer. So, I really fall short on the awareness of what is possible here.
I feel your channel is providing me with lots of useful knowledge to build up my arsenal. Thanks.
Well done calling out the GDPR issue with Google Fonts!
This is not an issue if the fonts are hosted on your own server (which is super simple to do).
I love the Wordpress tip / insight in the end, a “fancy” font for the “brand” and then system fonts for the rest. You could even just bring the letters you need if you’ll just use it for a logo and 3 words 😛
I’ll combo the tip in for designers, I’ve been saying “you get one font, but it’s variable so all the weights”, with “you get one font + system fonts” and see how it goes 😄
So great you’re covering things like this, I’d love to see a video on explaining and fixing issues on the upcoming Next Paint (INP) metric and with examples like say a slow carousel.
One of the best channels on UA-cam for me. Don't let negative comments guide your content. They choose to be here and some people will always be too smart for us. Even when they're not.
That is not an option. The corporate font is a very (most?) important designelement. Also we selfhost the (google)fonts and always get a 100% pagespeed (untill the customer wants 3rd party shit, youtube or ads)
Love your content!
If it's a single font that gets used across the entire site, 100% it's fine. The problem is when you have 2-3 different fonts, each with 4+ weights and italics mixed in, that things start to get dicy, and the body text and small things are probably fine being system-ui, with larger text being a custom or web font that has some personality.
@@KevinPowell3 different fonts with multiple weights and italics on a single website feel like a design issue, to be honest. In any case you can convert them to WOFF2 and then Base64. By embedding everything in the css file you will instantly fix any issue (FOUT above anything else).
Thank you again. So much value in your videos.
Love all your videos 😍
Thanks for posting this and helping me understand system UI more!
Thank you so much!
Thank you for sharing. I love your channel.
improving of performance is stuff i am currently to deal with. I'll try to implement the most of your advices and recommendations
Great video as always! I'm a developer for market research software. I know it's kind of a niche, but I have to deal with cross browser/device consistency for the end-end user (e.g. survey participants) in a very detailed way everyday. It really comes down to things like the width of actual labels/strings sometimes. Because how things look, oc can have an effect on answer behavior. In professional market research you want to have absolutely perfect comparable datasets between different users (oc filtered to at least the devices used).
Answer options:
Very unsatisfied
_just looks different than_
Very
unsatisfied
There's also That One Guy that has Exocet set as the system font, but that falls into the self inflicted damage category.
LOVE THIS. will spread this as my new gospel. you're so underrated
Oh my god such a refreshing point of view. Or, not so much refreshing, but to actually say it out loud. I think the heading compromise is a nice way to work around look vs feel.
another subscriber her. i watch almost of your video and it help's me a lot on my projects as front-end developer
It is awesome. I will use this in my future profile!
I have been using sans-serif and serif for some time now. Thanks for telling me about system-ui
Damn, That font really looks cool! thank you for recommending it, never realized that I could use system fonts like that...
As someone who uses Ubuntu mainly, I tested it out to see what fonts are used. system-ui becomes the "Ubuntu" font which makes sense and is a good font, but sans-serif becomes "Noto Sans" which I think is much nicer.
Ah, that's interesting 🙂
system-ui has been my go to font since watching you use it on a past unrelated tutorial
Preloading fonts in the tag is a big unlock for LCP and CLS
Sold!
I also like it when Kevin gets a bit sassy sometimes. He's earned the right.
Nice is theory and for personal projects, but I have yet to find a designer that would accept having different fonts on different platforms
Ask them why it's okay for the layout to be different on different devices then 😅.
Just tried system-ui on my project that used Inter. The difference is so minimal. Totally convinced. Thanks
I literally did this exact same thing. I'm definitely punting the Google Font after this discovery
Thanks for the explanation! I think your video could also be useful for designers who trying to reinvent the interfaces instead of simplifying them.
I think I'll use it on my project
As someone who start as a coder this really suit me
On the other hand , sites that are based on recurrent user-login/visits can boast the caching.
So first load it's slow but from there on , everything is smooth because most fonts and resources are cached.
Totally! Just gotta make sure that first time isn't terrible tho 😅
Thanks it's a great video.
I will say that if you stick to variable fonts, you can dramatically reduce the both the loading time and the bandwidth requirement of using web fonts; additionally, they also get you all the supported font weights, italics, and several other font effects that css can change.
I've been self hosting google fonts since the gdpr bs arrived, but I'll give this a try when customers are not too mad about particular styles
You can always download your fonts instead of relying on CDNs, but i also love "system-ui", always use it on my css reset.
I like your example text :)
Hello Kevin!
Thank you for this insight on fonts, this is a domain I don't know well about.
You nailed it by speaking about Roboto, and how system-ui is an universal alternative to it: I usually use this font and with your video I can change it to the system one, saving few (kilo)bytes and the planet.
I was wondering, because I can't find any convenient tool to compare: do you have such an alternative to Open sans ? That's the 2nd one I use with roboto, and if you have a way to mimic it for 0 bytes, I'm totally into it also!
Anyway, thank you for your time and your videos!
Variable fonts help reduce the number of weights needed. This might be a good follow up video.
It depends on how many weights you make use of in the first place. For my website, I considered switching to the variable version of Work Sans, but given that I use only four weights, at this point it was better to optimize static fonts.
I would love to exert more control over exactly what weight is served depending on the size though, so I’m pretty sure I will switch to variable at some point. But just to say, variable fonts aren’t necessarily the better choice.
But you could get into subsetting, where you exclude the weight ranges and possibly even character sets from the variable font that you don’t need, thus making the variable font as lean as possible.
@@evasilvertant Typically a variable weight font only needs two weights and can interpolate the rest.
@@soviut303 Oh right, subsetting cuts out characters, not part of the weight range.
I appreciate your cojones to make such a suggestion! I can already feel the shitstorm coming. While I am convinced that good typography makes a huge difference, many sites really don't need that much attention to details. I switched recently some sites back to system fonts, since it worked absolutely fine. On the other hand, local fonts embedded properly don't have a huge impact on the performance of lightweight websites.
Kevin, is there any right way to use icons as well from font awesome, kit or local install or cdn?
Hi dear Kevin!
I really like your content. Can I know which Recording Program and Montage are you using to record the screenshot and the Video?
Thanks.
nice to ear! we've been taught to use google fonts...
I use the default one in tailwindcss: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif
Variable font can also be an option to improve loading time. Not so fast as the system font stack, but a good tradeoff (style vs speed)
100%! Love variable fonts a lot, but you do need to be careful, I've seen a few that are insanely large. But in general, 100% agree that they're amazing :D
@@KevinPowell Subsetting is also an option; there are ways to exclude weights and even character sets from the variable font, to make it as lean as possible.
thanks
Thanks for this very useful video. The windows font family Segoe is pronounced "Sea Go". I only know this because I watched a Linus Boman video about Microsoft fonts. 👍
Another great UA-camr!
Thanks Kevin for another wonderful video tutorial, and the link to modernfontstacks. I compared the most commonly used sans-serif fonts (lato, roboto, raleway, open-sans, etc.) on a page of repeating paragraphs to determine which was more legible and better suited for body text. I found open sans to be the best, so that is the font I use. But my font stack also includes the system fonts you mentioned. I also add the system fonts with my @font-face declaration (see below).
I agree with your assessment. Most people don't care and wouldn't know one font from another. Header fonts, for obvious reasons, are different.
Thanks. Mark
@font-face {
font-family: 'Open Sans';
font-weight: 400;
src: local('system-ui,-apple-system, BlinkMacSystemFont, serif'), url('../fonts/opensans-regular-webfont.woff2') format('woff2'), url('../fonts/opensans-regular-webfont.woff') format('woff');
font-display: swap;
}
Gotta try that "Cartel" font.
I think that most modern sites use quite big copytext font-sizes and so it really makes a big difference what font on copytext you are using. I would see the difference evene standing 3m away from my screen.
The designer side of my brain is screaming nope, the developer side likes that Wordpress compromise lol
System font stacks are awesome, they're super performant, and they make the user feel "at home" and like the site was designed for them/their device.
However, if you work at a company with a brand identity, they would never allow you to use fonts that aren't their own. I'd suggest falling back to system and loading the correct fonts. For example, if you have a serif heading font and sans body font, use a system serif stack for headings and system sans stack for body, and then load fonts in quickly, but don't delay the page load.
The big problem I see with this is that the x-height and the eye / open of different fonts in a stack can change radically and that there is no way to pair a font with a scaling factor or something. I tend to decide of the base font-size of a font-face based on the way the font looks in order to maximize readability or effect.
Actually I guess you can use getComputedStyle and a css variable. It would have to be a blocking script in the `head` or something
LOVE you my teacher you are css GOD
Love from Pakistan
what do to suggest to get rid of unused css and js during website speed optimization when developer have use in high number of cdn and unnecessary local css and js....
Did you make the point that using system fonts makes your web pages look "right" or "at home" on the system? If so I missed it.
Besides webdev, i know to do Instagram templates, and choosing the right font is 90% of the overall appearance in them. with websites, it's also important to choose a good font
100%, but no one is going to notice the difference on the paragraph text. Headings, go with something nice and with personality 100%, which is what I talk about at the end
@@KevinPowell wow, i never expected you to answer any of my coments!
And you're right: for paragrapgh text there's no need to look for a "perfect font", most fonts are easy enough to read, and tehre's no need to spend a lot of time thinking about which font to use for general text.
Choosing a good font for large text and headings is very important, but there are some buts to this
Websites aren't Instagram posts at the end of the day, so there are some differences, of course.
for general text there's no need, most of the fonts are easy to read and people aren't going to stop looking your website if "your text font is simple". it might help at the end of the day, making the text easier to read
another thing is that it helps with familiarity:
instead of trying to "reinvent the wheel", i think it's important for websites to have a "basic structure" to help with navigation, and i think it also applies to fonts
you mentioned that most websites use the system fonts, so using them for your headers would also help with that, creating a familiarity feeling that could also help with giving credibility to your website
The variable version of the font Figtree, when converted to WOFF2 is only 25 kb. Outfit is 30 kb. Self-host it, and enjoy
What alternatives do you think would be good if it's a non-Latin language? As a Korean, I think the options and methods you mentioned in the video are literaly impossible without webfont. Most non-Latin languages (especially in Asia) use Noto Sans by default (with using google fonts). Windows provides the default font-family for Korean, which is "Malgun Gothic." However, this font has only normal and bold weight :(
Only a year or two ago, a Korean font called "Pretendard" was developed that pretends Mac's basic font.
My favourite font for 2023 is Addington-CF.
Will the "modern font stacks" be effective if the user has altered their system fonts? I know obsessing about edge cases is counterproductive, but I've seen enough SMS screenshots on Reddit to know that some people are psychotic enough to set up some ghastly script font as the default.
I dont really get it, doesn't the Browser only load the Font weights that are used by the Site?
I've seen this pretty much on every site i did, that if i only used regular and bold it only loads those 2 even if i put in more weights
Creating applications in my language -Korean- involves using alphabet-based words, giving the app a multilingual touch. I'm on the hunt for a font that can handle various languages with balanced dimensions, but the standard OS fonts aren't up to par. While performance is crucial, readability matters just as much. That's why I still can't overlook the web fonts.
The world of web typography is severly lacking once you get outside of Latin characters, sadly.
I work in enterprise. Getting product teams to care a little less about the body font of an internal webapp and care a little more about page weight and loading performance is so hard.
Well done again @KevinPowell !! I respect the job of a designer; however bear in mind that you can have the prettiest website going around but if potential customers/clients don't hit on your site then you've lost the game!!
What is the link for onepagelove that shows those websites - I can't find it?
System UI in VS Code automaticaly gives: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
As a full-stack developer on WordPress, I like the idea of using an "on-brand" font for headlines (where you won't need more than 1-2 weights, plus italics), and using system-ui for content. Clients probably won't even notice the difference in the graphic/mockup phase, when whatever font used for the body copy differs slightly than whatever they end up seeing on their machine.
It will be interesting to see if a designer I work with occasionally feels the same way, and would willing to "give up creative control" over body copy...
A user might not notice the difference, but many of the clients I've worked with over the years certainly noticed if one of their brand fonts didn't render correctly on their machine, or if it was swapped entirely for a more accessible alternative.
That article about a website being sued is scary!
Yeah, a lot of people don't realize the potential for that is there. In that case it was for a small amount, but it's something we always need to be aware of.
Do you have a link to that article?
@@KevinPowell there’s also the potential for lawsuit if your website isn’t up to accessibility standards. I haven’t heard of a case where legal action was taken but it’s a possibility! Besides that risk of course you want to be accessible to include all your users.
@@tjrenninger4967 I don’t, I didn’t go look for it; just read what was on the screen when I paused the video but I’m sure if you google the headline you will find it!
What about variable fonts, I like the idea of having to load only a single or at most two fonts that cover everything I could possibly want and more, as some fonts are really flexible when it comes to font-variation-settings. But yeah support isn't perfect either. But I like variable fonts.
Like you say Kevin, 'Nobody cares', so why jump through all the hoops. Store your chosen font on your own server, load it from there and all the loading speed issues go away. Your entire team reference the same font and everything on the site is uniform. The alternative is trust someone else's server and put up with slow loading and only partial control.
I like constant fonts cause they’re much easier to screenshot test and consistency across platforms
I always download (google) fonts , I don't know if it even saves that much loading time (I test with throttle ). I spend more time worrying / optimizing media then that kind of thing. It matters if your users are in a remote place, which is probably not the case for most people.
font optimization for the web can be a huge rabbit hole when it comes to subsetting fonts and other things. If you're using one font with a few weights, you're probably fine, it's when you have 2-3 different fonts, each with a few different weights and variations, that you start seeing some issues. And "remote places" can sometimes have better connections that crappy public wifi that a lot of people use all the time :D
Just convert the font to WOFF2 and then Base64. Finally, add the Base64 converted code to your CSS file. Problem solved. No more FOUT, rendering, or performance issues. Bonus: you will get perfect scores on Lighthouse.
System prompt for Windows is not vertical central.
One thing I love is telling our designers who want a specific sans-serif body font “nobody is going to tell the difference”. 😂
Not to mention, since most modern systems support multi languages, system fonts automatically support all languages as well.
If system-ui is good enough for Kevin, then it is also good enough for my clients.
It’s good enough most of the time. I build small sites for businesses and I also design them. Most of the time I choose a system font and the client never notices.
Would my design look somewhat better if I used a google font? Probably so. But most people don’t care as long as your site works and they can get information they need.
All subjective though and depends on the type of site.
system-ui has another advantage. The user recognizes the font immediately. It’s like, we don’t have to use custom JavaScript video players anymore, the user is used to recognize their video player from their browser of choice immediately.
And to be honest, they are quite good.
Good luck though to convince your customer or designer with that choice, though. 😏
I fixed this by just adding the font to my asset sup domain. (It might have taken me 2-3 hours, to realize that the file google gives you, are a zip file😅)
It might not be the exact same thing, but what about font squirrel's Webfont Generator?
It's okay, from what I remember, but users still need to download those files.
I'm that designer who has issues with that quite a bid. I mean ... loading times ... I would first go for a variable font. Second everything as woff2 und third preload the font.
I mean if you look at the average Wordpress site there is a sht load of js loaded without questioning this in any way but when it comes to fonts than convincing the designer to use system fonts necessary.
If it's done right the font issue is no issue any more but you have to know what you are doing.
I wish. Unfortunately, my company's designers and clients would refuse to have fonts that are different for every device 😂
Then ask them why it's okay for users to have different layouts depending on what device they are on (mobile vs. desktop, etc) 😆
I've never understood the "but it needs to be pixel perfect" when no two users get the same experience anyway... but I also know how it goes.
@@KevinPowell If you knew my company you would be eye rolling at every request from design. I get the usual it needs to be pixel perfect on a daily basis so much so that I've grown accustomed to it (spent a week making a button centered because a font that design chose renders differently across browsers 🙃)
I want all the fonts, screw the user 😂😂
Surprised that it actually looks good with latin characters! Almost never used system fonts for my projects because most of them includes CJK characters, especially Chinese. The default font for Serif, PMingLiU, has became a meme because of how terrible it looks on almost anything; the weight of default Sans also looks weird. The best solution would probably be Noto fonts from, you guessed it, Google Fonts. That leads to the file downloading issue though.
Using variable fonts might solve that, but I noticed that on iOS devices, it seems to render twice (with a bit offset for the second) for the texts, with Next.js as the framework. Don't know if this issue occurs in other places
It is easy to host such fonts on your webserver.
Bootstrap is everybody’s favorite? I actually hate it 🙈 but it’s personal preference 😅
I'm really torn on this take. On one hand, I get it, page loads are important, and no one really cares about font. But, on the other hand, the WP example contradicts the logic of the video! If you have another font for headings or branding, you will get layout shifts. So, what's the gain here?
Also, I've had to work on building dashboards and tables, and let me tell you, when you are trying to squeeze as much information on a page with lots of elements of fixed size, those line lengths do become really important.
Does anyone know of a website where I can send you my current source and suggest the one that most resembles the native ones?
Use the font site Kevin mentioned and compare it to your current site/source. Use your eyes.
Roboto is android only, most nix systems use noto sans though
What about variable fonts? You only have to load in one file to get all font weights, and with a bit of a compression you can shrink this file down to under 100kb
Still slower than native fonts.
@@tristen_grant of course. But you have less control and some are pretty ugly
What happened to Verdana?
This entire time I thought the comma on the font-family was like addresses, and for each comma, it got more and more specific or the other way around...
Something like: Asia, Japan, Tokyo, or something like that... Lol...
8:00 Yes, my designer uses a paid Adobe application and chooses only paid Adobe fonts there. Asks why the fonts are not the same as in the design. And does not think about where I should take them.
Me who uses settings to force almost everything on my computer to be Cafeteria Black, Pico12, or BrianneTod (they're used in a game I like): 👁👄👁
What’s your views on Adobe Fonts? A good source or just as bad as Google fonts? 😅
I find them a bit slow tbh. I'm still using them for my personal site I think (it's been a long time, lol), but maybe they improved things since I last looked
I miss the "falling in love or at least being less frustrated with css" intro 😁
I'll try to bring it back from time to time :D
Yes, please bring it back. That intro is like system-ui
Just wanted to let you know, support for "system-ui" is not perfect... ;)
Let me agree to also disagree. Yes it's as you said and also (as other people mention) convincing not just designers but also clients to use a system font is hard. I prefer the local hosted fonts with just one or two fonts and one or two styles (from thin/light/regular to semibold/bold). The problem with system fonts lacks on the character width (and probably line-height too), as you can see in 7:03 having Roboto and Cantarell is a world of difference.
That's why using a web font for headings or other things can be useful, but leaving all the smaller text as web fonts is fine. Even if fonts are wider/narrower, it's not like they live in a fixed-width area either, since viewport widths are different for everyone. I think we're more or less on the same page though, and yeah, it's hard to get others on that one too :D
Yes, this.
Have fun debugging ALL the different stuff the fonts do differently.