74: Steve Schoger - Tactical Design Advice for Developers artwork

74: Steve Schoger - Tactical Design Advice for Developers

Full Stack Radio

October 12, 2017

Topics include: How to pick great fontsChoosing a color scheme for your projectDesigning in greyscaleRecreating existing interfaces from scratchRecommended design toolsWhat you should design first on a new pageStrategies for making things look professional without graphic design...
Speakers: Adam Wathan, Steve Schoger, Paul

Topics: Technology

**Adam Wathan** (0:00)
In this episode of Full Stack Radio, I talked to Steve Schoger about five ways that you can get better at design as a developer. This is Full Stack Radio episode 74
Hey, everyone, welcome to another episode of the Full Stack Radio Podcast. Today, I am joined by Steve Schoger. How's it going, Steve?

**Steve Schoger** (0:32)
Good, yourself? Thanks for having me.

**Adam Wathan** (0:33)
Not too bad. So I guess for anyone who doesn't know who you are, who doesn't follow all the hot tips on Twitter, can you just kind of introduce yourself and kind of explain who you are and what you do?

**Steve Schoger** (0:45)
Yeah, I'm a designer from Kitchener Waterloo. I'm about 20 minute drive from where you are. I was actually thinking of driving out to your place this morning to do the first live recording of the show.
And I do a lot of design work in the Laravel community. I work closely with Taylor. I do a lot of his products. I do all the Laricon sites.
And then I also work closely with Titan, and they're an agency who, they focus on Laravel development out of Chicago.

**Adam Wathan** (1:21)
Awesome.
So I think most people who have heard of you probably know you from following you on Twitter, where you share lots of like really tactical tips for people to sort of like get better at design, like little things that they can improve, stuff like that. So what I thought would be awesome would be to have you on the show, to sort of have a discussion about different ideas that developers can use to get better at design. So we kind of planned out five different topics here. So why don't we just dive into the first one right away?

**Steve Schoger** (1:54)
Sounds good.

**Adam Wathan** (1:55)
The first thing that we're gonna talk about is how to pick fonts for your project.
So what are kind of your general thoughts on picking fonts for a new project, especially projects that developers might be working on, more like application UIs than marketing sites, I would say. If someone's building a side project app or something and they're trying to pick a good font for it, what is your approach?

**Steve Schoger** (2:22)
Yeah, I would say try to stick with one font, try to pick one good multi-purpose font.
And I think a sans serif is always a safe call with that. And when I say multi-purpose, I think one that has a lot of weights, one that looks good at multiple sizes, and is just clean and neutral, and can be used across multiple components.

**Adam Wathan** (2:49)
Yeah, so something that works both for headings and for body copy and in buttons and stuff like that.

**Steve Schoger** (2:56)
Exactly, exactly.

**Adam Wathan** (2:58)
So something I find, when you're going to a site like Google Fonts or Typekit or something, I'm looking at Google Fonts right now, and if you just browse every font that's available here, there's 846 fonts to choose from, which is pretty overwhelming.
So how would you go about paring this down and coming up with a smaller selection to choose from? How do you weed out the ones that you are not interested in using?

**Steve Schoger** (3:28)
Yeah, one of the problems with Google Fonts is that a lot of them were designed by people who are learning how to make fonts. So there's a lot of crappy fonts on there, and there's a few good ones.
But with that, if I'm on Google Fonts, I would, just on the sidebar on the filtering, I would stick to just the popular fonts. You're immediately gonna get given 10 really good fonts at the top there.
And then I would just find one. You can filter the amount of weights each font has. So I'd stick between, if it has between eight and 10 weights. Because you want to make sure you have, yeah, you want to make sure you have the regular, the bold, but also have a light font for headings, maybe a medium or semi-bold. And then you want to have all the italics as well. So that's at least eight with the italics as well.

**Adam Wathan** (4:25)
For sure. Yeah, I find as soon as I go to Google Fonts, and I'm trying to pick a new font, the first thing I do is go to this category sidebar and basically uncheck Serif. So we're not finding any Serif fonts.

**Steve Schoger** (4:36)
Yeah.

**Adam Wathan** (4:36)
Uncheck display, because by definition, any display fonts are only really going to look good at large heading sizes and are going to suck for body copy. Disable handwriting, of course. Why the hell would you use handwriting font in application UI? And then monospace.

61 more minutes of transcript below

Thousands of transcripts fetched by people building searchable podcast archives

Feed this to your agent

Try it now — copy, paste, done:

curl -H "x-api-key: pt_demo" \
  https://spoken.md/transcripts/1000651996090

Works with Claude, ChatGPT, Cursor, and any agent that makes HTTP calls.

From $0.10 per transcript. No subscription. Credits never expire. Prices exclude VAT, added at checkout for EU customers. Not what you expected? Email us within 14 days with 20 or fewer credits used and we refund the pack in full.

Using your own key:

curl -H "x-api-key: YOUR_KEY" \
  https://spoken.md/transcripts/YOUR_EPISODE_ID