Hasty Treat - CSS Typography and Systems

Syntax - Tasty Web Development Treats

Wes Bos

Tech News, News, Technology

4.9 • 1.2K Ratings

🗓️ 18 January 2021

⏱️ 26 minutes

🔗️ Recording | iTunes | RSS

🧾️ Download transcript

Summary

In this Hasty Treat, Scott and Wes talk about CSS typography, and how to quickly get up and running with type systems. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 05:00 - How do you define type at the start of a new project? 15:03 - How do media queries and screen sizes affect your system? 16:58 - Why are systems in type important? 20:21 - How do you design a type system? Scott’s type system: /* Font Sizes */ --baseFontSize: 1rem; --baseNavSize: 0.64rem; --smallFontSize: 0.8rem; --smallestFontSize: 0.512rem; --xtra-big-ass-heading: 3.052rem; --xtra-heading: 2.441rem; --heading-1: 1.953rem; --heading-2: 1.563rem; --heading-3: 1.25rem; --heading-4: var(--baseFontSize); --heading-5: var(--smallFontSize); --heading-6: 0.64rem; --heading-7: var(--smallestFontSize); Links https://type-scale.com/ Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Transcript

Click on a timestamp to play from that location

0:00.0	Monday, Monday, Monday,
0:02.0	Open wide Dev fans.
0:04.0	Get ready to stuff your face
0:06.0	with JavaScript, CSS, node modules, barbecue tips,
0:09.0	get workflows,
0:10.0	break dancing, soft skills, web development,
0:12.0	the hastiest, the craziest, the craziest development the hastiest the craziest the tastiest web development treats coming in hot here is
0:18.1	Wes Barracuda bars and Scott El Toro Loco Tolinsky.
0:25.0	Welcome to Syntax.
0:28.0	And this Monday, hasty treat, we're going to be talking about CSS typography and systems, how you can quickly
0:35.2	get up and running with a system of typography that will take all of the
0:39.4	guesswork out of your CSSing around typography, which we all know is not a ton of fun if it's not your specialty.
0:47.2	My name is Scott Toliski. I'm a full stack developer from Denver, Colorado, and with me as always is the fantastic,
0:54.5	Mr. Boss.
0:55.7	Hey, happy new year.
0:57.7	We're back at it.
0:58.4	This is the first one we're recording in 2021,
1:01.6	so feeling somewhat refreshed.
1:03.2	I'm excited to be back to work after a couple weeks off.
1:06.3	Yeah, I spent the entire break rewriting my platform,
1:10.7	so I wish I could say necessarily the same thing. It's an unhealthy thing, but at the end of the day, I didn't have a whole lot of time to do, you know, just like nothing for some reason. I don't know. We had like 800 projects going around at the house so it was like oh we got to do
1:25.0	projects we got to do this we got to do that and then it was like almost like coding in the
	...

Please login to see the full transcript.

Previous episode | Next episode

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.