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.
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.
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.
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.
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
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.
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 😄
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
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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 use the default one in tailwindcss: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif
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.
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.
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 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.
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; }
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.
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. 👍
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.
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.
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!
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.
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.
@@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!
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.
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.
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.
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 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.
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....
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.
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.
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!!
I've been preaching this idea for years. If fonts are your selling point on site or app, then something is wrong with your product and you've got bigger problems than how the site looks. Nobody, really nobody, will turn down a good offer in system-ui. People don't discuss your fonts or compare them to another site. As long as copy is legible, they see beautiful images, a good price and CTAs.
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
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.
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 🙃)
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
7:45 that's actually not true. I'm doing this whenever i notice the difference. The more prominent it becomes on sites you visit on a daily basis. Sometimes the difference in fonts dives me crazy.
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.
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
In a world where mobile device apps are dominating, using a system font stack increases the probability that a web-app/website looks familiar with many apps running on a mobile device. But that is something what the ego of designers doesn't want to comprehend. In a time where "no-design" websites are looking increasingly great the work of designers get more and more reduced to provide illustrations. As someone who is creating websites since 1996 I have never met a designer who really understands how to create a design which meets most other development requirements. This wide-spread incompetence of designers is forcing developers to go constantly a lot of painful extra miles with on the long run difficult to maintain results. If you are using custom-fonts self-hosting the font(s) is a must.
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
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...
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 😉
Thanks for posting this and helping me understand system UI more!
Thank you so much!
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.
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
I love that we've come full circle back to using font stacks.
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).
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.
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 😄
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
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.
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
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.
Preloading fonts in the tag is a big unlock for LCP and CLS
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 🙂
Sold!
I also like it when Kevin gets a bit sassy sometimes. He's earned the right.
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.
improving of performance is stuff i am currently to deal with. I'll try to implement the most of your advices and recommendations
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).
This is super insightful, specially your final point I think it's spot on. Thank you as always, Kevin!
LOVE THIS. will spread this as my new gospel. you're so underrated
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.
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
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.
system-ui has been my go to font since watching you use it on a past unrelated tutorial
Damn, That font really looks cool! thank you for recommending it, never realized that I could use system fonts like that...
The designer side of my brain is screaming nope, the developer side likes that Wordpress compromise lol
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 😅
I have been using sans-serif and serif for some time now. Thanks for telling me about system-ui
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.
There's also That One Guy that has Exocet set as the system font, but that falls into the self inflicted damage category.
another subscriber her. i watch almost of your video and it help's me a lot on my projects as front-end developer
You can always download your fonts instead of relying on CDNs, but i also love "system-ui", always use it on my css reset.
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 😅.
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.
Thank you again. So much value in your videos.
I use the default one in tailwindcss: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif
It is awesome. I will use this in my future profile!
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.
Kevin, is there any right way to use icons as well from font awesome, kit or local install or cdn?
I think I'll use it on my project
As someone who start as a coder this really suit me
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.
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 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
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;
}
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.
Thanks for the explanation! I think your video could also be useful for designers who trying to reinvent the interfaces instead of simplifying them.
Thank you for sharing. I love your channel.
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!
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 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.
Love all your videos 😍
One thing I love is telling our designers who want a specific sans-serif body font “nobody is going to tell the difference”. 😂
1:26 "And don't run away yet ..." 😁
You can run away at 11:43 😉 😉
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!
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.
I like constant fonts cause they’re much easier to screenshot test and consistency across platforms
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!
nice to ear! we've been taught to use google fonts...
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.
The variable version of the font Figtree, when converted to WOFF2 is only 25 kb. Outfit is 30 kb. Self-host it, and enjoy
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.
I like your example text :)
System UI in VS Code automaticaly gives: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
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.
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.
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 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.
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....
My favourite font for 2023 is Addington-CF.
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.
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.
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!!
I've been preaching this idea for years. If fonts are your selling point on site or app, then something is wrong with your product and you've got bigger problems than how the site looks. Nobody, really nobody, will turn down a good offer in system-ui. People don't discuss your fonts or compare them to another site. As long as copy is legible, they see beautiful images, a good price and CTAs.
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
Thanks it's a great video.
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.
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 🙃)
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.
System prompt for Windows is not vertical central.
Gotta try that "Cartel" font.
7:45 that's actually not true. I'm doing this whenever i notice the difference. The more prominent it becomes on sites you visit on a daily basis. Sometimes the difference in fonts dives me crazy.
Are you a designer?
@@tristen_grant Not quite, I'm doing business analytics intermingled with some FE interface development on a daily basis.
LOVE you my teacher you are css GOD
Love from Pakistan
What is the link for onepagelove that shows those websites - I can't find it?
Not to mention, since most modern systems support multi languages, system fonts automatically support all languages as well.
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 want all the fonts, screw the user 😂😂
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.
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
In a world where mobile device apps are dominating, using a system font stack increases the probability that a web-app/website looks familiar with many apps running on a mobile device. But that is something what the ego of designers doesn't want to comprehend. In a time where "no-design" websites are looking increasingly great the work of designers get more and more reduced to provide illustrations. As someone who is creating websites since 1996 I have never met a designer who really understands how to create a design which meets most other development requirements. This wide-spread incompetence of designers is forcing developers to go constantly a lot of painful extra miles with on the long run difficult to maintain results.
If you are using custom-fonts self-hosting the font(s) is a must.
thanks
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.
How to apply your tutorial to a website? It seems like the video doesn't explain it in detail.
Bootstrap is everybody’s favorite? I actually hate it 🙈 but it’s personal preference 😅
What happened to Verdana?
Roboto is android only, most nix systems use noto sans though
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.
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...