Hasty Treat - CSS Typography and Systems

Welcome to Syntax.

In this Monday, hasty treat. We're gonna be talking about CSS typography and systems, how you can quickly get up and running with a system of typography that will take all of the guesswork out of your CSSing around typography, which we all know is not a ton of fun if it's not your specialty. My name is Scott Tolinski. I'm a full stack Developer from Denver, Colorado. And with me as always is the fantastic mister Boss. Hey.

Happy New Year. We're back at it. This is the first one we're recording in 2021, so feeling somewhat refreshed. I'm excited to be back to work after a couple weeks off. Yeah.

I spent the entire break rewriting my platform, so I wish I could say necessarily the same thing. It's an unhealthy thing, but at the end of the day, I I didn't have a whole lot of time to do, you know, just, like, nothing for some reason. I don't know. We we we had, like, 800 projects going around at the house, so it was like, Oh, we gotta do projects. We gotta do this. We gotta do that. And then it was, like, almost like coding in the evenings for me. Like, it was, like, almost like relaxing for some reason. It was, like, a A chill thing. So our sponsors today for this episode are Sanity and Sentry. Those who of you who have been listening to Syntax for a long time have known that we Love both Sanity and Sentry. So with a little bit about Sanity is Wes.

Yes. Sanity is the structured content CMS. They have been coming out Swinging with all kinds of features. So if you got 2021 and you're working on a project, you got your next product, you need a headless CMS For your project, check out Sanity. It's awesome. It's well, the way that it works is that you you set it up and you create a a project. So all of Sanity is done in the code. So you define all your schemas. You define all the inputs that you have. You define how they relate to each other. And then when you run this thing, you can also get this additional thing called Sanity Studio, which is the actual CMS. And Sanity Studio, man, they have spent a lot of time working on this as a CMS. It's pretty slick. Because so Sanity is both an API, a GraphQL API. They also have this thing Grok, which will it's another language or or syntax for crewing the data out of Sanity.

And then you get Sanity Studio, which is a React JS based CMS that you can use to edit and manage all your data, and that CMS is really slick because your your clients, your users, whoever is actually managing the data at the end of the day, They will use that. You can put your own custom React JS components in it. So I am challenging you. In 2021, I want you to pick up whether it's a client project or a side project or whatever and try Sanity out in one of your projects. Go to Sanity dot I o Forward slash syntax. That's gonna get you double the free usage tier. Thanks so much, Ascendity, for sponsoring. Cool. And this episode is also sponsored by Sentry now Sentry is the error handling and exception service that Wes and I both use. In fact, I use,

Sentry every single day. It's so funny. With Sentry and Sanity, I'm trying really hard not to say the word sanity here. Every so I really love Sentry. I I really love this product, one of the cool new things that they've added recently is this performance tracking.

And one of the cool things about the performance tracking is it really gives you good insight Along with graphs and tables into just how fast every route that your site has.

I don't know if people in the past have gone to Google Analytics To look for this type of thing, but for me, I think this is a much more helpful view. It it fits a little bit more into the side of Monitoring of your website rather than analytics or something, to me, this feels really nice and it even gives you a really cool user misery Core, which lets you know which of your routes are the most problematic.

It's very, very cool. It breaks it up, and it gives you all of the kind of metrics that you'd like to from something like this. So you can see quickly at a glance the time to 1st contentful paint, the largest contentful paint, the 1st input delay, the Cumulative Layout Chef, which who the heck likes Layout Chef? I don't think anybody does. So you're gonna want to head on over to Sentry at century.i0.

Use the coupon code at tasty treat, all lowercase, all one word. Get 2 months for free, And start monitoring not only your performance, but your errors and exceptions and more with Sentry.

Okay.

So Welcome back, Wes. It's feeling like I need to start doing some, like, warm up stretches here to get going. And, also, with just our luck, Notion happens to be down. So we're We're gonna get through this, Wes. We're gonna get through this 1st episode.

The big question I wanted to answer in this episode is, How do you define type in your projects? How do you define type in your projects? Font sizes, font families, those type of things. How do you define them in your actual projects? But, also, how do you come up with the systems, and how do you create these things in a way that they end up being essentially helpful to the life Cycle of the project without becoming bloated.

It's a common trait of CSS to, okay, do a little patch Here, then a little patch here. The next thing you know, 10 years from now, your entire CSS system is not a system, but just a randomly assorted, this looks Good at the sizes. Yes. This this looks pretty good. And I think for some people, they're still styling text in that sort of way where they're saying, Oh, yeah. This looks good. Let me just set it to this random value or whatever. It seems about right.

And in my experience, designing on a type system and a system that can be created for you, especially when you're new to this kind of thing, is one of those things that will set your designs apart from feeling amateurish because part of the things that really can make a design feel amateurish is bad use of spacing and typography.

And, unfortunately, typography is a difficult topic, so you can't necessarily expect everyone to become a typographic master from the very get go.

So I think we would wanna start this off with, like, how do you set up your types personally and maybe answer some questions as we go. Like, how How many font sizes do you define? Where and how do you define them? What units do you use? And how does this fit into the overall picture of media queries for your particular application or your sites.

So for me, I usually create a typography dot CSS File in my project, whether I'm using scope CSS style components or whatever. I'll always have, like, a 1 file, and that file will Do both all of my global styling as well as export any custom typography Values that are used throughout the site from there. And I really like doing that because, like you said, it can get out of control.

I find that putting it all into 1 file or or even 1 folder lets me know that, okay, if I'm fussing with the font size on this thing, I should try my darnest to go back to those base things that I've created and adjust them in there. So what I'll usually do is I'll I'll set up my HTML tag, and I usually set the base font size on my HTML tag to be 10 p x. You'll also see people do that as 62.5%.

We've talked about this in in the past. And the reason behind that is because the the default font size in In the browser, 16 pixels, and it's really easy to set that to like, as a Canadian, I'm used to sane measurement systems, And doing things based on 16ths doesn't make any sense to me. Doing things based on 10th. 10th to write. What is going on It was people like That's true. What what did they did they set the base font size to be 16 because of It was an American that did it or just because that was, like, a good read that that's a good readable size, I guess, if you don't have any CSS applied. Yeah. I think that's probably it. Yeah. Yeah. Anyway, so by setting the base to 10, then anytime you use a a rem value, you can always do it 10 base. So 1.5 rem is very easily calculated as 15 pixels. It's very easy in my head. Years ago, there was a difference Between using 62.5% and 10 p x because the percentage allowed users to scale up their font sizes accordingly, That's not true. That hasn't been true for, like, 5 years. People always like to bring it up. Yeah. People are like, what about accessibility? Do you hate blind people? And I was like, no. That's that's not a thing anymore because the like, try set your base font size to 10 p x and then zoom in and out with your plus And minus keys, and it will still go up and down. So that's not a that's not really issue anymore. What else? So once I have that, I'll go through all of my base styles, paragraphs, List buttons set a base font size on that, usually, like, a a a 1.5 rem on that. I'll usually use rems by default, and then I'll kick over to using m's if if I find that I need to make a component where everything scales up accordingly.

Although, I was doing m's the other day, and I switched it to using CSS variables and calc. Mhmm. And I was hitting some, like, weird, like, half pixel issues with m's, and I switched it to calc and CSS variables. And those issues went away. And I was like, wow. That's maybe I should not be using m's anymore. Maybe I should just use using variables and calculate the the font size based off that. Then I'll go through all my headings and set them all up. H one through h six. They all have, a file. I don't have a, like, a value that I increment by. I'd be curious To see if you have a more of a a formula for calculating those, I sort of just kinda eyeball it and see what looks good. And then I'll also make classes Where you can style an h two as an h one. And I used to think this was the silliest thing ever. Like, there's probably even a tweet of me being like, Why would somebody say, like, h one with a class of h two? And now I get it. It's because you want your headings to be appropriate nesting values For accessibility, for Google SEO, and things like that, but you sometimes want an h two to look like an h one. And if that's the case, you don't just use an h one, use an h two, use the appropriate tag, but then you style it to look like like an h one. And then past that, I just create variants. So sometimes I have, like, a a hero h one or a a large text. I just make a bunch of little utility classes I can slap on things. So I I'll usually have just a handful of those that are used throughout my project and try not to get too carried away. Otherwise, like you said, Scott, it gets Too messy and poof. Yeah.

Have you ever opened up a CSS file and seen that, like, font Size defined in every single class, like, every every single class because it everything was so specifically defined That, like, people are just To override it? You have to override it, and the only way to fix that is to just write it all from scratch.

That's it. Yeah. Actually, I don't have, like, a rule where, like, you should only apply font size to text nodes, like a paragraph or something like that and not to, like, a div,

But that's sort of the way that I sway. Do you have, like, a rule like that where you don't set a font size on a div? Yeah. I do not set font sizes on divs. Definitely don't do that. Only on individual elements. And, to be honest, I don't know how many times I even set font size. Like, I I Yeah. I guess I do have a fair bit of font size overrides, but not like a ton, ton, ton.

So for me, I I do only assign them to Specifically, type based elements. So I'll I'll define the font sizes on paragraphs, headings, those types of things. But that yeah. Pretty much it.

Occasionally a span span. Sometimes you get spanny. Yeah. I'm getting spanny.

That's mine. It's not like a huge thing that I do. It's just sort of a A little system. Like, what about you? Do you have a bit more of a defined system, or is it similar? Yeah. So we, at some point here, got to rewrite all of the CSS

To be CSS variabilized, CSS variables do the whole thing. In our CSS, we do not define any Font sizes that are not based off of a CSS variable.

So every single font size in our Scoped CSS, so to say, is pulling from a CSS variable.

And our CSS variables, we have let's see. It's really interesting. The way that I I have done it is I have I have 9 different font sizes ranging all the way from 3.0 Five 2 rems to 0.512 rems.

I do not use that 10% thing just because I I set The American Yes. The only way the only way the only place I know. I I I'm picking it up. The only place I define the font size is In the variables themselves. So it's not like I'm having to think about REMS ever in my site. I'm never thinking about REMS, pixels, anything.

Everything is based off of a couple of variables. So I have base font size, which is set to 1 RAM. I have base nav size, small font size, smallest font size. And then from there, I have all of my, headings set. Heading 1, 2, 3, 4, 5, 6, 7, all the way down to 7, and these are just Heading sizes. So, again, no correlation to the semantic meaning of those element tags. And then I have a couple of extra ones, which are are kind of like when I really need something big that's not like my normal h one size. I have an extra heading, and then I have an extra big ass heading Or anytime I need to to, like, really get some big headings going. So that's really how I define my my font sizes. So I I do them in rims. The values here, you might be wondering, like, 0.52 whatever rems. Like, that's sort of, you know, Odd. I got these values from a generator. So these values, again, they did not come from my brain. They came from a generator of which we'll talk a little bit more about in a second. So I define them all in my variables. I only use the variables, and I don't do any calculating, so I I'm not calculating the size based on one thing or another. And since they're rems, they're all relative to the base rather than Just using the variables. Correct. That makes sense. And, like like, to be clear, it doesn't matter that it's 0.5545

rems because Scott doesn't remember that. He remembers

extra big ass large. Yeah. Right. I like that. Anytime we're doing CSS and we we see, like, font size, you'll see font size, base nav size, font size, small font size, font size, Like, base font size. So, like, when you're defining that that in the CSS, it's so readable. And not to mention, it really keeps things hard on the system, Which is what I'm all about right now. How how do you scale up and down with media queries in your system? Do you just change the body font size? Because I think that's all we do. We change the body font size, since we're using REMS.

The and then ever so occasionally, We'll update one of the CSS variables. Let's say the base nav size got too itty bitty on mobile when I Yeah. Scaled down the base font size, so then I have to, like, Override that 1 in particular. But since there's so much stuff based on that size, it just kind of all flows back together. You go bigger on when you go on mobile or smaller? It honestly depends. So my base font size, I set HTML to 18 pixels. By setting the base font size To whatever you want, you can scale up the whole system up and down since it's all on REMS. Right? And then on the HTML tag.

Yeah. I'm trying to find where I have my media query for that. I don't necessarily see I don't know if I even update. I I just said I did, but I don't know if we do anymore. What I should do is I'll bring my headings down,

especially for, like, my marketing pages where my headings are, like, Like, totally, the whole entire width of the Yes. Yes. The width of the thing. Yeah. And I'm thinking about, like, those websites that I build, and I'll usually bring those down quite a bit. Or if you use, like, VW values for for your headings, Then they'll just scale down based on the width of the thing, which is kinda nifty because then you don't have to, like, write, like, 4 or 5 little breakpoints where you're like, alright. Bring it down a little bit more, a little bit more, a little bit more.

So that's what I do. Sometimes I'll bump the font size up a little bit on mobile, But I don't don't do a whole lot of of touching

past that on the the different font sizes. Yeah. For what I'm seeing, I'm only overriding the base font size For my my HTML, I'm only overriding that base font size in the larger screen, and I'm making it larger. So it looks like mine does stay at 18 pixels all the way down to mobile.

So, hey. That's how I did it. So let's talk a little bit about systems because now that you get a little hint on how we're both doing this, why are systems important within CSS as well as typography in general. I'm a huge CSS systems fan, big, big, big fan of this. Because when you write your CSS onto A system, it enforces consistency.

And one of the things that people don't realize with aesthetically building something nice looking is that One of the things that makes things look nice is consistency.

Right? If you have a slight difference in your font sizes here and there or wherever, Then that slight difference is going to add up, and it's going to look weird. It's just gonna look off. It's gonna look same thing with, like, spacing. Right? Some of those, like, Really low hanging fruit in designing a, CSS that looks nice is, like, if you have a system for your typography and a system for your spacing, then As long as you have that system, it's gonna be consistent. Now, of course, that system could be too tight or too open or whatever. But as long as you have that system, the consistency is going to be there, and Probably gonna look a little bit better overall. Another one is it takes all of the guesswork out. When I'm starting, like, a new component and I need a specific Font size that it's not allowing me. I know that my options are not every single number in the history of numbers dot pics or whatever. I know that I can set it to base font size, smallest font size, any of my headings, and you know what? Those are my only options.

So But I have, like, 9 font sizes. So if you can't find the correct size in 9 font sizes, then that's a problem.

It's true. Another, like, little benefit I was just thinking about your method of using variables is that you can easily scale up The font size for accessibility reasons without scaling up the rest of everything on the website. Because if you, like, just use Zoom on your computer, Then it zooms up borders, margin, padding, images, literally everything else. And for a lot of users, they just want a bit larger font and not A bit more porter. Right? Totally. So back in the day, these were popular. We have, like, the 3 little a's, and you can allow someone to scale up or down the font size. You can make those really, really easily by just incrementing your your base font size

and not incrementing everything else off that. Yeah. I love things like that, man. Again, it it just makes it easy. You don't have to think about it. I know we have a lot of problems with, like, decision fatigue. We make Too many decisions in a day, and the last thing I wanna do is be making a decision on, like, each individual font size. So, like, if I can take any of that, like, decision making out, Helping reduce decision fatigue and making choices while coding without having to worry about if it's gonna look nice.

Like, I already have designed, Quote, unquote, the system. So why do I need to design this individual thing as an individual thing? Like, it should just fit in the system. I think also, like, If you are not good at design,

picking a system like this really helps you make something that's not super ugly. Yeah. I think that's something we see. Like, we're talking a couple episodes ago about, like, just like things you know, people are like, oh, I'm I'm sending a 1,000 resumes, and I I Can't get noticed, and there's sometimes things like drop shadow and whatnot that just a turn off on your website. Another one is inconsistent Font size, and you might not even see it yourself. I Oh, yeah. This just looks weird. Yeah. If you have a system, the system will save you. Have faith in the system.

So the, last 1 I wanna talk about is how how do you actually design one of these font systems? Because I'll include my font system, which is really, what, like, Ten lines of CSS in here. I'll include mine in the show notes, but, like, how do you design something like this? Because I sure as heck did not Come up with 2.411 dot REMS. Like, I didn't come up with that. So one of my favorite tools on the web is, is a place I've been going to for a very long time, and there's a handful of other resources that do this exact same thing. But the one I really use and love and we teach in my my courses, a type hyphen scale .com.

Now type scale .com has this really basically gives you every font size you could need. And then if you need 1 more, there's a plus button at the top or bottom. So if you need to go bigger, you can always click plus and add on additional larger ones that fit within a system, And they're all based on ratios. So, like, they're major 3rd, minor 2nd, perfect 4th, golden ratio. And these these ratios are actually what defines the scale. So in the little sidebar, you could say, alright. I want a base font size of 18 pixels. I'm gonna pick a perfect fourth, And then it has every Google font ever, so you can set your heading font, and then you can set your body font. Or if you don't have those picked out, You can experiment with them in here to see what they're gonna look like. So you can set all of your body font type and your heading font type And the scale, and guess what? It spits out an example on the right column bar that shows you body paragraph text With all of the different heading sizes and how it's all gonna look. And you will see visually there that it's going to look nice. It feels like I'm, like, shilling for this website. I I have no connection to, Jeremy Church who wrote this website. It's a really nice resource. At the bottom of this page, it'll say grab the CSS button and then edit on code pen button. So I always just grab the CSS. I grab the CSS directly, and that's what gives me all of my sizes.

So this is really how I do it. I rely on tools like this that are really just doing some math behind the scenes for me that calculates How big each thing should be, and it gives you the the RAM and pixel value. So, like, whatever you want. If you wanna do it all in pixels, they're all here, And it allows you to visually see that this thing's gonna look nice. I don't think I would ever define a type system without something like this simply because I am just Not trained in typography. Typography is something that people spend their entire careers doing. So, like, it would be very arrogant of me to be like, Oh, yeah. I can I can just create this all all myself because I I'm too I don't know? Yeah. But, Wes, you're a type head, though. I mean, you're you're good at typography.

So did you use any sort of tools when coming up with this, or are you just, like, straight up, I know it looks good because I've always looked at your designs, and I I always really, really love the typography in all of your designs. How did you come up with that stuff? That's a good question. I just kinda

fuss around with it until it looks good. That's not fair, Wes. That's not fair.

But I think that's a little bit different for you're probably referring to, like, my, like, course websites, like, with, like, marketing and things like that. Yeah. Like, those things, You can. I think you can be a little bit more up and down with the font sizes and see whatever. Because, like, I do go 1 by 1 and adjust those as needed. But then, like, I look at something like my own website and the blog, and I have a much more defined type system for that because there's Blog posts, and there's headings, there's subheadings, and and things like that. And that's more of a website and a publication that needs consistent typesizing, Whereas my marketing websites is there are always different colors and different sizes, and they're skewed and rotated and and things like that. So, yeah, that's Unfortunately, I don't have a scientific method for that. It's just the good old eyeballing.

Good old eyeballing. Yeah. And, like, for somebody like you who's just, like, very skilled in design, like, that certainly works. My wants in design have always been much greater than my abilities. So, like, I I want it to look a certain way, but I don't right. I'm not really good enough to aesthetically look at this and and know how to tweak it. So some people always say, your stuff looks really good. You are a designer. I'm like, well, I'm just kinda picking values out of a a generator here, but, thank you.

Yeah. It's good. It's it's That's, again, that's the whole point of the type system. Right? It saves you from maybe yourself. If you don't necessarily know what to do, the type system will tell you what to do.

Totally. Cool. Well, this is a CSS and type systems.

I have a lot of thoughts on CSS and CSS systems in general in terms of Consistency in all these things. So maybe we can do some more of these. We can talk about color systems. I've done some neat stuff with HSLA recently.

So font size is definitely 1. I think we have a lot more things to cover in terms of, like, how do you come up with your shadow system or your z index system or your

The the very worst, padding in margins. Oh, do you have gosh? A couple of BS variables in my thing, and everyone always asks what they're for, and it's It's a box shadow.

Box shadow.

Ours are ours are level. We have level 1, level 2, level 3.

That's appropriate.

It is appropriate.

Alright. That sounds good. Thanks so much for tuning in, and we will catch you on Wednesday.

Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop A review if you like this show.