Make your sites look better // Simple tips to picking fonts

Рет қаралды 52,620

Күн бұрын

Check out Designmodo's Postcards: designmodo.com/postcards/
Picking fonts can be a frustrating affair. Rather than diving deep into the world of typography, in this video I want to show you two super simple steps to how you can pick fonts for your site, and have them look great every single time!
#designfordevelopers
---
Keep up to date with everything I'm up to
www.kevinpowell.co/newsletter
---
Help support my channel
Get a course: www.kevinpowell.co/courses
Buy the t-shirt: teespring.com/stores/making-t...
Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZfaq channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Пікірлер: 137

@KevinPowell 4 жыл бұрын

What's your favorite font?

@Morrile1 4 жыл бұрын

That's a hard question as Verdana is old but super easy to read but as you have taught us it depends where the text is being used; header, footer, highlighted/attention grabbing etc. A font I do like is not ideal for Websites and that's Zurich Calligraphy.

@everestgjonaj 4 жыл бұрын

t26 - Carbon

@crousdioll 4 жыл бұрын

There is no particular font, because each project requires a different font

@sudeep.g 4 жыл бұрын

Signika

@junaidtariq4547 4 жыл бұрын

Poppins

@michaeloosthuizen2383 4 жыл бұрын

Something to remember about using different fonts is that the elements that share that font should be logically related. So an event title and event price is an excellent example of a good relationship, an event title and then a link to a privacy policy would be a bad relationship.

@KevinPowell 4 жыл бұрын

Very good point Michael. I'm going to be looking at doing a full design soon, I'll try to bring that up along the way :)

@gabrielsales7402 4 жыл бұрын

thanks. I'm not a designer and i'm always overthinking fonts without having any idea what im doing. Your video gave me a better idea on how to go about choosing them

@KevinPowell 4 жыл бұрын

Glad I could help!

@Xevailo 2 жыл бұрын

Same here!

@MrJayspeaks 3 жыл бұрын

Subscribed and devoted. KP drops serious knowledge with each video.

@KevinPowell 3 жыл бұрын

Glad you're enjoying my videos, and thanks for the sub :D

@digigoliath 4 жыл бұрын

Great topic!! I love Fonts but being a non-Designer, this area is where your tips & guidance will be most helpful.

@luiscolome75 4 жыл бұрын

I love the font series!! awesome video Kevin as always!! I love Comfortaa, Catamaran, Nunito and Roboto Slab.

@denniec7994 3 жыл бұрын

Thank you Kevin. I love going back over your videos when I have to swap my developer hat for my designer hat when building a site.

@carstenberggreen7509 Жыл бұрын

Great video. Its really helpfull for many webdevelopers to understand how design has been working before the internet. I was so lucky to start my web carrier in an advertisement agency, so I saw many beautiful designs and layouts from professional designers. Especially font size and line heights became very clear to me, Your videos about fonts will make the web become more beautiful, I hope. Keep up the good work!

@blonduose 4 жыл бұрын

I was actually here for a more complicated take on typography :D, but I think I will get that in your course when I get to that module. However, this was very useful for the level I am at now, as I was too afraid of mixing fonts on my mini-projects.

@KevinPowell 4 жыл бұрын

I'll have some more in-depth talks on the topic as well, but I do think it's important to start with the quick wins :)

@womanmuffin 3 жыл бұрын

This video was very helpful, thank you so so much!!!!

@henrichsury98 4 жыл бұрын

Thank you for your videos. They are awesome

@gouisedeau 2 жыл бұрын

Excellent tips! Thanks

@joeldcanfield_spinhead 4 жыл бұрын

I love my quirky Fortunaschwein, but my go-to everyday carry font is Josefin Sans.

@FrankArlt 3 жыл бұрын

Thanks. Helped my a lot

@harmonicresonanceproject 2 жыл бұрын

Extremely helpful!

@mysandeluxe 3 жыл бұрын

Best font tutorial ever

@duck8dodgers 4 жыл бұрын

I've always liked Pruisa this is mainly because it most closely matches my hand lettered Comics, is relatively easy for me to reproduce by hand, is open source, and it is on linux platforms like Krita which is what I use to make my comics nowadays. Of course if you don't have an exclusively linux based audience it does not work for a website, so I use the Kalam with google fonts for the bits of my website that aren't actually comics. It matches Pruisa fairly well and unlike most handwriting fonts has 3 styles.

@ciussky Жыл бұрын

Choosing the right fonts is the hardest thing on earth :)) Thanks for sharing these tips. I personally like "Merriweather".

@jordillobetpalau 4 жыл бұрын

Thanks for your amazing videos. My favorite font is Montserrat

@chakradharcholleti6722 3 жыл бұрын

Mine too, also poppins

@subham-raj 4 жыл бұрын

*Poppins*

@biaksangmunsong9577 4 жыл бұрын

Poppins is my #1 choice

@SoulStitch1111 Жыл бұрын

Frank Ruhl Libre. Balmoral was my preferred for wedding style font.

@najmantube 4 жыл бұрын

Graphic designers (who design web pages) have always told me that you should only use two fonts max. No doubt a graphic design wunderkind could use any number, but for mere mortals stick with two (max). Probably best to use only one :)

@KevinPowell 4 жыл бұрын

In general for any design, 2 is enough. You *can* get more to work, but in general it's exponentially harder to get things to look good every time you add a new font.

@joeldcanfield_spinhead 4 жыл бұрын

In specific cases, like posters and things more design-y than informational, multiple fonts can work just fine. But as you say, mere mortals working on an informational presentation, a single font/single color (plus B&W) is the safe smart option.

@coffindave 4 жыл бұрын

Favorite font - Gotham Ultra.

@arjunlubana9720 4 жыл бұрын

Opensans is what I mostly use. works for me all the time.

@spookytrigger 4 жыл бұрын

ProximaNova I'm just stuck on it but after your vid i'm gonna get more adventurous

@michal_kuczek 3 жыл бұрын

Gilroy, Work Sans and PT Serif 👌

@nephi4485 2 жыл бұрын

Hi! My favorite font is Arial. My favoritegoogle font is Roboto.

@lawrencerosen7113 2 жыл бұрын

At long last - Kevin has written a decent starting point for this OTHERWISE intimidating and horribly-confusing subject.

@paulseica2285 4 жыл бұрын

Could i get your opinion on the Playfair Display italic font? i know its very specific but i found it interesting to use and i am curious if it could work for a professional website

@KevinPowell 4 жыл бұрын

It can work well in the right site :)

@xreev0x 3 жыл бұрын

Serif fonts are designed for readability, so that each letter is easily recognizable. This is the reason why you find it used for a large amount of text in publications like books, newspapers and magazines. For this reason, it is best to use sans-serif for titles and serif for paragraphs. Reversing that tends to just look odd.

@dgknca 4 жыл бұрын

Quicksand

@wolfrayet81 4 жыл бұрын

Montserrat and Raleway :)

@ore_bear8045 3 жыл бұрын

I think it´s easy to overthink fonts and think that the verdana, arial, roboto etc is so boring. But just because you as a designer think get bored doesn't mean that the normal user is... And a good font is in most case a font that you don't notice, it´s not the font but the message that should be in focus. My favorite is Verdana.

@brian554xx 4 жыл бұрын

What I want from a font is sans except capital I so it doesn't look like an l. (see?) To me, the serifs on an I are part of the letter and it looks wrong without them.

@BrinleyBlogette 9 ай бұрын

Do you have a short video about fallback fonts? Why they're important? Do designers on projects provide these? If not, then what's best to suggest? Free code camp always has us define fallback fonts but like, why? How is the navigated in the "real world" aka when you get a job lol. Maybe this is a silly question but I just want to prep for the real world and create good habits. I want to have answers for any little detail or at least know how to navigate these nuances in the real world. Maybe I could just google this lol but I trust your content now. Plus, if you need a short video or a quick video upload, this could be a topic, idk.

@justkailash 2 жыл бұрын

one question.... All Google fonts are free to use personal or commercially? .without attribute? .... is that any legal issue can happen if one or all my clients using in their websites or app?

@suparthghimire1644 4 жыл бұрын

Raleway all the way! :p

@keirwatson3570 4 жыл бұрын

But the numbers! I love Raleway until I need a phone number or numbered list - it’s all wonky.

@Albarghouthi 4 жыл бұрын

Quick question, why have you switched from Adobe XD to Figma?

@KevinPowell 4 жыл бұрын

Using both. I'm still really a fan of XD, but I wanted to broaden my horizons. I'll have content with both moving forward :)

@potatomaaan1757 4 жыл бұрын

Raleway is definetly my current favorite font

@victorjozwicki8179 4 жыл бұрын

Verdana !

@blackpirate8748 2 жыл бұрын

I like your smile

@MomoMediaAustralia 4 жыл бұрын

I think the choose of the font is more dependent on your brand guideline rather than any other things. Thanks for the video though

@KevinPowell 4 жыл бұрын

For sure, this was more for devs working on personal projects and side projects where none of that's been decided :)

@0xDEAD_Inside 3 жыл бұрын

Arial. Less Bloat. And sometimes a serif font.

@bonbonpony 2 жыл бұрын

03:40 This (different weights and italics), plus special characters from non-English languages, boils down the number of fonts available DRASTICALLY :q And this is a very sad state of digital typography even today :/

@michaeloosthuizen2383 4 жыл бұрын

Layout by tables flashbacks... man we have seen some things, some awful things.

@KevinPowell 4 жыл бұрын

😂😂😂

@derekbell2905 4 жыл бұрын

Lato (free) and Proxima Nova(paid)

@KevinPowell 4 жыл бұрын

I love Proxima Nova! I used it on my site before the current design.

@isaiasmulatinho 4 жыл бұрын

Proxima Nova

@KevinPowell 4 жыл бұрын

One of my favs too :)

@frankdelange1122 4 жыл бұрын

proxima soft i like even more, a bit warmer look with the rounded corners...my newspaper uses capitolium 2, especially the headline bold version I find sexy, the way it curves, the huge x-height, this is what i miss in google fonts so far, not many elegant headline fonts with contrast strokes

@benzflynn 3 жыл бұрын

3:21 But this does not mean that Google font APIs will serve all the available font-weights. Often if you apply something like @import url('fonts.googleapis.com/css?family=Roboto:300,400,500,600,700,800'); but only find a change for 300, 400, 500 and 600. Even worse for Lato. Would be better to install all font variants needed in a fonts folder.

@violet-trash 4 жыл бұрын

I like PT Sans but I really dislike the weird crevice on the letters. I wish there were a version without that.

@laura-leighpalmer8412 3 жыл бұрын

Goudy Oldstyle

@imtiazmangerah 4 жыл бұрын

Comic Sans

@TheStillhonest 4 жыл бұрын

Just to add this office-party-at-5 joie de vivre to your project.

@maciejka1 2 жыл бұрын

comic sans 😳😳

@chhavimanichoubey9437 3 жыл бұрын

i like fonts of all minds of terminal hahaahaha

@danielgarr4030 4 жыл бұрын

Please, pretty please, with sugar on top... HTML emails

@KevinPowell 4 жыл бұрын

Once I escaped table based layouts, I made a promise to myself never to go back, lol.

@neeleshgaur8424 4 жыл бұрын

Hello Kevin, long time..

@KevinPowell 4 жыл бұрын

Hi :D

@dipeshmandanka 3 жыл бұрын

poppins

@fvdham 4 жыл бұрын

Courier New

@thomasfields2082 3 жыл бұрын

Just pick ones you like. Then let the client tell you to change it, never do and they will love it.😈

@rafa6536 Жыл бұрын

Translate transform D

@furkhaan2304 4 жыл бұрын

Roboto

@smgraphics3012 2 жыл бұрын

subscribe u

@johnnygotti1568 Жыл бұрын

Saucer font? What's a saucer font? Oh wait Sans Serif lol

@godwinzealot6938 2 жыл бұрын

roboto

@sathwikprabhu 4 жыл бұрын

F**k everything. Use Montserrat

$@fractalelement857$

@fractalelement857 3 жыл бұрын

I cant watch a video without all these annoying video commercials poping up. They are like mosquitos. This sucks.

@2002budokan 4 жыл бұрын

Unnecessarily long, and nothing new. Void talk.

@KevinPowell 4 жыл бұрын

Sorry you didn't like it :(. A lot of devs have trouble picking fonts, it wasn't really meant for someone who's already comfortable with fonts and typography.

@MrGreenpaulo 4 жыл бұрын

@@KevinPowell Not void at all! Very helpful for me, a beginner at choosing fonts. Thanks Kevin! You ARE appreciated!

@2002budokan 4 жыл бұрын

@@KevinPowell Kevin, I am not comfortable with choosing fonts. That's why I watched this video. I follow your channel and generally like your videos. But this one did not bring any benefits. Yesterday I watched a 3 mins video on how to create a color palette from any picture. I wanted to like that video over and over. Because it was short, and offered an ingenious alternative to pick colors for my app-palette. Please take my harsh criticism as a constructive criticism.

@amyp.575 4 жыл бұрын

@@KevinPowell I have watched most of your videos because they are awesome and I learn so much. I have to have longer videos with a few examples so thank you for taking extra time to teach people like me!!

@amyp.575 4 жыл бұрын

You are an asshole. I'm sorry your mother didn't love you enough.