Make your sites look better // Simple tips to picking fonts
HTML-код
- Опубликовано: 8 июл 2024
- 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 RUclips 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!
What's your favorite font?
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.
t26 - Carbon
There is no particular font, because each project requires a different font
Signika
Poppins
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.
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 :)
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
Glad I could help!
Same here!
Great topic!! I love Fonts but being a non-Designer, this area is where your tips & guidance will be most helpful.
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.
I love the font series!! awesome video Kevin as always!! I love Comfortaa, Catamaran, Nunito and Roboto Slab.
Subscribed and devoted. KP drops serious knowledge with each video.
Glad you're enjoying my videos, and thanks for the sub :D
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!
I love my quirky Fortunaschwein, but my go-to everyday carry font is Josefin Sans.
Best font tutorial ever
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.
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 :)
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.
Thank you for your videos. They are awesome
Excellent tips! Thanks
This video was very helpful, thank you so so much!!!!
Poppins is my #1 choice
Extremely helpful!
Thanks. Helped my a lot
Opensans is what I mostly use. works for me all the time.
Frank Ruhl Libre. Balmoral was my preferred for wedding style font.
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 :)
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.
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.
Choosing the right fonts is the hardest thing on earth :)) Thanks for sharing these tips. I personally like "Merriweather".
Favorite font - Gotham Ultra.
*Poppins*
Gilroy, Work Sans and PT Serif 👌
Thanks for your amazing videos. My favorite font is Montserrat
Mine too, also poppins
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.
Hi! My favorite font is Arial. My favoritegoogle font is Roboto.
At long last - Kevin has written a decent starting point for this OTHERWISE intimidating and horribly-confusing subject.
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.
ProximaNova I'm just stuck on it but after your vid i'm gonna get more adventurous
Raleway is definetly my current favorite font
Montserrat and Raleway :)
Quicksand
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.
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
It can work well in the right site :)
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?
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.
I think the choose of the font is more dependent on your brand guideline rather than any other things. Thanks for the video though
For sure, this was more for devs working on personal projects and side projects where none of that's been decided :)
Verdana !
Raleway all the way! :p
But the numbers! I love Raleway until I need a phone number or numbered list - it’s all wonky.
Arial. Less Bloat.
And sometimes a serif font.
Quick question, why have you switched from Adobe XD to Figma?
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 :)
Lato (free) and Proxima Nova(paid)
I love Proxima Nova! I used it on my site before the current design.
I like your smile
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 :/
Layout by tables flashbacks... man we have seen some things, some awful things.
😂😂😂
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.
I like PT Sans but I really dislike the weird crevice on the letters. I wish there were a version without that.
Proxima Nova
One of my favs too :)
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
Please, pretty please, with sugar on top... HTML emails
Once I escaped table based layouts, I made a promise to myself never to go back, lol.
Goudy Oldstyle
Hello Kevin, long time..
Hi :D
Comic Sans
Just to add this office-party-at-5 joie de vivre to your project.
Translate transform D
comic sans 😳😳
Roboto
Courier New
Just pick ones you like. Then let the client tell you to change it, never do and they will love it.😈
i like fonts of all minds of terminal hahaahaha
poppins
Saucer font? What's a saucer font? Oh wait Sans Serif lol
roboto
subscribe u
F**k everything. Use Montserrat
I cant watch a video without all these annoying video commercials poping up. They are like mosquitos. This sucks.
Unnecessarily long, and nothing new. Void talk.
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.
@@KevinPowell Not void at all! Very helpful for me, a beginner at choosing fonts. Thanks Kevin! You ARE appreciated!
@@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.
@@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!!
You are an asshole. I'm sorry your mother didn't love you enough.
Comic Sans