typography

Scott and Wes discuss the delicate balance of what’s acceptable to borrow or be inspired by in web development and what crosses into territory that’s off-limits. Tune in as they share personal experiences, discuss where to find ethical inspiration, and offer tips on how to effectively capture and utilize it.

Show Notes

• 00:00 Welcome to Syntax!
• 01:57 Brought to you by Sentry.io.
• 02:26 What is okay to steal?
  • 02:57 Color palettes.
  • 03:14 Font stacks.
  • 06:26 Type scales.
    • Warp’s CSS Gradient Border.
    • Sentry’s Date Picker.
  • 08:52 General layout patterns.
  • 10:39 General vibes.
• 11:20 What is NOT okay to steal?
  • 11:26 Whole site designs.
  • 13:32 Taking too many things from ‘what to steal’ list.
  • 16:30 Text copy.
    • Wes’ Parity Purchasing Power.
• 18:48 What we’ve had stolen + how it feels.
• 21:45 Where to find inspiration.
  • 21:56 Code inspiration.
    • CSS Scan Buttons.
    • CSS Scan Box Shadows.
    • Codrops.
    • CodePen
  • 25:18 Design inspiration.
    • Bentro Grids.
    • Dribble.
    • Site Inspire.
    • SaaS Landing Pages.
    • One Page Love.
    • Type Wolf.
    • Mobbin.
    • Syntax Newsletter.
    • Hoverstat.es.
    • Internet Gems.
  • 32:48 UX inspiration.
    • Good UI.
    • The Component Gallery.
    • Open UI.
    • Nicely Done.
• 35:25 How to capture inspiration.

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott:X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

In this episode of Syntax, Wes and Scott go over some of the results the State of CSS survey for 2023, including drop-shadow, subgrid, logical properties, media range, and more!

Show Notes

• 00:25:21 Welcome
• 01:31:22 Soccer update
• 03:52:05 Syntax Brought to you by Sentry
• 04:03:18 StateOfCSS.com
• State of CSS 2023
• 04:21:11 Top 5 Most Used Features
• 09:13:09 Drop-shadow
• 13:00:11 Subgrid
• 18:31:21 Logical properties
• 20:11:20 Media range
• 20:52:11 Object view box
• 23:10:14 Anchor positioning
• 28:21:09 Intrinsic sizing keywords
• 29:32:00 View Transitions API
• Can I use… Support tables for HTML5, CSS3, etc
• Astro
• Supper Club × Astro 2.0 with Fred Schott — Syntax Podcast 580
• 31:43:18 Updates to colors in CSS
• 35:07:05 Accent color, current color
• 36:36:11 Scroll snap and overscroll behaviour
• 39:04:22 Touch action
• 40:16:01 Line clamp or variable font
• Variable Fonts
• 45:28:11 Accessibility features
• 48:33:12 :Has has jumped
• 49:32:11 @Property
• 53:52:13 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

• Scott: Kodiak Cakes Strawberries & Cream Oatmeal Packets (Pack of 6)
• Wes: Food Storage Containers, Baby Food Storage Containers with Lid, Baby Food and Toddler Snack Containers

Shameless Plugs

• Scott: Syntax Podcast (@syntaxfm) | TikTok
• Wes: Web Unleashed 2023 - FITC

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
• Wes Bos on Bluesky
• Scott on Bluesky
• Syntax on Bluesky

In this episode of Syntax, Wes and Scott review your websites that you submitted including bald.design, Anh Hoang Nguyen, bradleyshellnut.com, and more.

Prismic - Sponsor

NEEDS AUDIO RECORDING FIRST

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax

Show Notes

• Uses.tech
• 00:10 Welcome
• 03:35 How to submit your site for highlight
• 04:11 bald.design
  https://www.bald.design
• 10:38 Anh Hoang Nguyen
  https://www.hoanganh.dev
• 15:08 kennytye.com
  https://www.kennytye.com
• 22:42 Sponsor: Freshbooks
• 24:10 rubenoliveira.tech
  http://rubenoliveira.tech
• 28:47 abgn.me
  https://abgn.me
• 32:02 Sponsor: LogRocket
• 33:19 bradleyshellnut.com
  https://bradleyshellnut.com
• 41:11 hunterjennings.dev
  https://www.hunterjennings.dev
• 46:19:16 Sponsor: Prismic
• 47:42:19 matthewfarlymn.com
  https://matthewfarlymn.com
• 55:00:01 SIIIIICK ××× PIIIICKS

××× SIIIIICK ××× PIIIICKS ×××

• Scott: Bad Vegan
• Wes:

Shameless Plugs

• Scott: LevelUp Tutorials
• Wes: Wes Bos Tutorials

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

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

In this Hasty Treat, Scott and Wes talk about tips for writing good CSS.

Sizzy - Sponsor

Sizzy - The browser made for developers and designers. Stop manually resizing your browser window and switching between devices so you can test responsive design. Speed up your workflow by developing and previewing your website on multiple devices at once. Sizzy includes powerful features and plugins that will help you take your web development game to the next level. Sizzy.co.

Show Notes

4:08 - Use a system

4:50 - Use overrides and cascading

• Embrace the cascade
• Don’t rewrite the same CSS over and over again
• Understand why scoping is good

9:07 - Nail down typography early

• You can always revisit if it isn’t what you need

10:36 - Pick a pattern and stick to it

• BEM
• Functional CSS
• CSS in JS

14:39 - Don’t style based on element type (kind of) — a class should describe the component

17:09 - Good naming techniques

• Describe what it is, not what it looks like
• Thing
  • ThingChild
    • ThingChild-modifier
• Scale sizes (e.g. s, m, l, xl)

21:43 - Other tips

• Group like CSS together
• Chunk into different files
• Write good comments
• CSS properties FTW

Links

• Stylus
• Webpack
• Parcel

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

In this episode of Syntax, Scott and Wes talk about design foundations for developers — tips to follow that will make your designs better!

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.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.

Show Notes

6:35 - Our backgrounds in design

12:41 - Foundations

• Consistency makes a big difference
• Use “training wheel” tools until you are confident
• Always work within a system
• Less is more - subtle is better

19:39 - Color

• Color theory
• Complementary colors and shades
• Stick to color pallet generators until you are good enough

28:51 - Spacing

• More spacing than you think you need
• Vertical rhythm
• Letter spacing: -1px
• Consistent margin and padding

34:47 - Typography

• Sans vs serifs
• Finding fonts
• Use proven combinations until you know your way around

41:49 - Interaction

• Design for all states (e.g. standard, visited, active, hover, etc.)
• Animations should be quick
• Interactions should make sense

45:04 - Concerns beyond visuals

• Accessibility via color contrast
• Thin fonts and light grey are awful
• Think about the poor Windows users

48:47 - Inspiration + Resources

• Take inspiration from the best — you’ll find your own voice after enough work
• Go easy on trends - blobby characters with purple hair
• Take a trip around the world wide web
• Stripe
• Dribbble
• Site Inspire
• codrops
• Refactoring UI

Links

• Designer Starter Pack - Andrea Crofts
• LastPass
• Colour Lovers
• Syntax 142: Travis Neilson on Skills Gap, Design, Focus and Working at Google
• Bloomberg
• Dropbox
• FontPair
• FontJoy
• Figma - Google Font Pairings
• Type Scale
• Creative Market
• Radnika Next
• Stripe
• Dribbble
• Syntax 72: Accessibility
• Firefox
• Site Inspire
• codrops
• Refactoring UI
• Adam Wathan
• Steve Schoger

××× SIIIIICK ××× PIIIICKS ×××

• Scott: Reelgood
• Wes: Magnesium

Shameless Plugs

• Scott: FullStack React with NextJS - Sign up for the year and save 25%!
• Wes: Beginner Javascript

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

In this Hasty Treat, Scott and Wes talk about CSS units (e.g. rems vs ems, px, ch, vmax), when and why you want to be using them, tips and tricks, and more!

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax.

Show Notes

2:32

• Typography with CSS units

12:04

• Pixels

15:17

• Viewport units

15:51

• ch units

16:35

• inch/cm for print

17:19

• Percentages

18:10

• Media queries

19:41

• Flexbox (flex-grow)

20:28

• CSS Grid: flexible units: 1fr 2fr

Links

• Sentry

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

It's a long awaited CSS Grid show! How does it work? When do you use it? What's the difference between Grid and Flexbox?

Sponsor

• Save A Bro is selling absolutely hilarious mustache t-shirts for $18 - all proceeds go to support the fight against prostate cancer. Use the coupon code "syntax" at checkout to get free shipping in the US.

The Show Notes

• Wes Bos AMA where he tricked Scott that Bert Bos was his dad
• CSS Tricks A Complete Guide to Grid
• Rachel Andrew
• Rachel Andrew Twitter
• Rachel's Grid by Example
• Rachel's Grid AMA
• CSS Grid Garden
• The Story of CSS Grid, from Its Creators
• Jen Simmons
• Jen Simmons Twitter
• Jen Simmons Labs
• CSS Grid Pinterest / Masonry Layout Question
• Wes' grid-auto-flow: dense; Experiment
• grid-auto-flow: dense; Docs
• caniuse CSS Grid Support - make sure to click the "Show All" button
• "If someone thinks progressive enhancement means providing a crappy experience for older browsers then they’ve got a lot of reading to do." — Sara Soueidan
• Benjamin De Cock - @bdc dropping tasty CSS Grid treats all day long on twitter.
• CSS Grid Animation #1
• CSS Grid Animation #2
• David K Piano Twitter
• Flipping
• Slide Deck on FLIP
• CSS Grid Template Area ASCII
• Grid repeat()
• Grid minmax()
• CSS Grid nth-row()
• CSS Sub-Grid

Sick Picks

• Scott: Just My Type
• Wes: Sick Update on the Caldigit TS3 Dock

Tweet us your tasty treats!

• Wes Bos
• Scott Tolinski
• Make sure to include @SyntaxFM