CSS Typography Crash Course

I've been joined by Roel Nieskens for a deep dive into Typography, exploring the awesome things we can do with variable fonts, and a bunch of useful Open Type features that we have at our disposal, that a lot of people aren't even are aware we have control over with CSS!

🔗 Links

Get a YT membership: Join this channel to get access to perks:

⌚ Timestamps
00:00 - Introduction
01:11 - Variable font basics
08:15 - Custom axis control with variable fonts
10:47 - How to find the custom axes
14:59 - Creative fonts
25:36 - Finding fonts
27:07 - Color fonts
38:05 - Practical Typography with CSS
39:46 - Tabular numbers
45:10 - Improving prose
49:16 - Improving technical writing
54:34 - font-feature-settings
57:52 - Font related units
1:01:21 - Perfect centering trick
01:06:12 - Explore your fonts

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

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 YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[AndreeaCozariuc]

Wow, transitioning the font-variation-settings is just satisfying ❤❤❤

[AlexisMorin]

This is similar to Roel's talk at CSS Day! So great to see him go into detail on the topic and hear his LOUD keyboard 😂

[henkmeerhof]

A great video Kevin and Roel, at last we are getting somewhere with typography, without having to work on the computer like I'm back hand setting lead type (I know what I'm talking about because I did use lead fonts to print and learn typography.
The amazing added feature are maybe not my cup of tea, but I can see those are the additions the new technology is able to add. Now I only hope those website makers know the first rule of any design: Keep it simple!

And I will definitely have a dip in the fondue, thanks Roel ;-)

[iamreg]

Everyday CSS amazes me in how wonderful this technology is. It's always progressing in beautiful and astounding ways.

[clevermissfox]

Ohh this is gonna be fun. I have an adore/despise relationship with typography; it can get so complicated and frustrating at times (mostly in terms of spacing, aligmment, glyph sizes ; thats where ive found a pattern that frustrates me).

But it's truly awe-some and very grateful to have an hour of content that ill no doubt pick up something new and helpful!!!

[OreaSuaste]

The video I (and everyone) needed! Amazing, thanks for sharing 🙏

[mateusbraga]

you are a trully CSS legend, cheers from brazil

[Alexandra-Rex]

This is very interesting! Great demonstration of thigns i did not know anything about. Will definitely be using those sites to find fonts to use and the CSS to control it.

[yatskanych_oleksandr]

As always very useful video! In the end i was sitting and thinking how many things i was able to do in other way if i would have know this before. Thanks, your videos always makes me feeling like - wow, really, is it possible )))

[douglashackney]

Awesome! Very inspiring and interesting.

[bbrixon]

I now realize how lazy I've been with my site designs.
I use variable fonts when I convert desktop to web, but I've never used them like this.
Thank you!

Thank you for this video. I've learned something new today 😊

[clevermissfox]

Would love a short about bringing in variable fonts; KPow has a vintage video about bringing in fonts with @font-face but mentioned that doing so with variable fonts require some extra settings. I’d be curious what those are and if there any considerations with bringing in Color Fonts, variable or not

[abcq]

45:15 bring back those 2 minutes of sacred knowledge!

[ke]

Are you serious, Kevin Powell? How amazing! Thanks

[tgd-]

Great video. Super cool tips, but is that a vintage Commodore computer behind Roel? That brings back memories 😀

[akoladebode-ajayi]

Always starting with
"Hello my friends and friends 😅"

[vilijanac]

Superb video. Best is not to load large variant fonts. Load them individually.
With new CSS, Is it possible to middle align lowercase chars in relation to the uppercase fonts in the character set?

[NotKyleChicago]

So, if I use Arial as font-family, does another font file get loaded when I set the font-weight? I generally use built-in standard fonts, so perhaps it's a moot point for those?

[TheMasterNone]

There was mention of an article on the perfect centering trick pleas share the link.