Hasty Treat - CSS Typography and Systems

Have you ever opened up a CSS file and seen that, like, font Size defined in every single class, like, every 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

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

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.

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 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

nesting values

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 all the inputs that you have. You define how they relate to each other. And then when 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.

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

It is appropriate.

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.

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

Peace. Peace.

That's appropriate.

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

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.

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.

Head on over to syntax.fm

Box shadow.

I have a lot of thoughts on CSS

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 So every single font size in our Scoped CSS, so to say, is pulling from a CSS variable.

Sentry at century.i0.

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.

So

Monday. Monday. Monday.

Boss, and Scott, El Toro Loco,

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing,

soft skill, web development, the hastiest, the craziest, the tastiest TS, web development treats coming in hot. Here is Wes, Barracuda,

Welcome to Syntax.

Tolinski.

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.

But I think that's a little bit different for you're probably referring to, like, my, like, course websites, like, with, like,

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 is that you can easily scale up The font size for accessibility reasons But I don't don't do a whole lot of of touching

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 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,

a scientific method for that. It's just So that's what I do. Sometimes I'll bump the font size up a little bit on mobile,

type system for that because

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 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,

the good old eyeballing.

to make a component where everything scales up accordingly.

I find that putting it all into 1 file or or even 1 folder

things that I've created Do both all of my global styling as well as

export any custom typography

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

to go back to those base

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, I should try my darnest your your base font size

And doing things based on 16ths

rem on that. I'll usually use rems lets me know that, okay, if I'm fussing with the font size on this thing, typesizing,

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

the percentage allowed users to scale up their font sizes accordingly,

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%

List buttons set a base font size on that, usually, like, a a a 1.5 It's true. Another, and 10 p x because 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 by default, and then I'll kick over to using m's if

I'm used to sane measurement systems,

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 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

In this Monday, Along with graphs and tables into just how fast every route 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? Yeah. I guess I do have a fair bit of font size overrides, but not like a ton, ton, ton.

fantastic

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.

hasty treat. We're gonna be talking about CSS

mister Boss. Hey.

Happy New Year. We're back at it. This is the first one we're recording And then you get Sanity Studio, which is a React JS based like you said, it can get out of control.

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

in 2021, 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,

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,

I spent the entire break rewriting my platform, bad use of spacing and typography.

so feeling somewhat refreshed. I'm excited to be back to work after a couple weeks off. Yeah.

I do not use that 10% thing just because I I set The American Yes. The only

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, CSS variables do the whole thing. In our CSS,

0.512

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 and type systems.

we have let's see. It's really interesting. The way that I I have done it is I have 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.

Font sizes that are not based off of a CSS variable.

Five 2 rems to typography and systems, I have 9 different font sizes ranging all the way from 3.0 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.

And our CSS variables,

rems.

Then it zooms up borders, dot CSS

then that's a problem.

without scaling up the rest of everything on the website. Because if you, like, just use Zoom on your computer, 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 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.

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

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, 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

in 9 font sizes, and CSS systems in general in terms of And, unfortunately, typography is a difficult topic, so you can't necessarily expect everyone to become a typographic one of those things that will set your designs apart from feeling amateurish because 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.

like, little benefit I was just thinking about your method of using variables

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 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.

master from the very get go.

that they end up being essentially helpful to the life Cycle of the project without becoming bloated.

is

is 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.

part of the things that really can make a design feel amateurish

you're a type head, though. I mean, you're you're good at typography.

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,

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

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

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 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.

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 and you know what? Those are my only options.

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, 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 And one of the cool things about the performance tracking is it really gives you good insight It's a common trait of CSS 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.

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.

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,

like,

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,

values for for your headings, In the browser, 16 pixels, and it's really easy to set that to like, as a Canadian,

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.

VW if I find that I need For accessibility,

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.

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

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, Values that are used throughout the site from there. And I really like doing that because,

To be CSS variabilized,

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 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.

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.

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,

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 Totally. Cool. Well, this is a CSS

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 that your site has.

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 Okay.

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

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, 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 Occasionally a span span. Sometimes you get spanny. Yeah. I'm getting spanny.

So But I have, like, 9 font sizes. So if you can't find the correct size 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, we do not define

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

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, 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 any So for me, I I do only assign them to

I want you to pick up whether it's a client project or a side project or whatever So for me, I usually create a typography

language or or syntax for crewing the data out of Sanity.

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

dot

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.

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,

rems because Scott doesn't remember that. He remembers

The and then ever so occasionally,

since we're using REMS.

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, 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.