6 simple typography tips to more professional looking sites

  Переглядів 128,046

Kevin Powell

Kevin Powell

4 роки тому

Check out Designmodo's Slides: designmodo.com/slides/
Devs often struggle with the design of their sites. One thing that holds their designs back the most is the way they handle type, so in this video, we're looking at 6 simple steps for you to follow to make for better typography, which means a much nicer looking site :)
1. Split the content up into groups
2. Increase contrast through font-size
3. Increase contrast through font-weight
4. Increase contrast through color
5. Increase the line-height of the body
6. Decrease the line-height of large text
And stick around to the end for a bonus tip, dealing with one of the biggest mistakes that I see devs make that absolutely ruins their designs.
Steve Schoger's channel - refactoring UI - / @steveschoger
My video on picking colours: • Give your site a fanta...
#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 UKposts 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!

КОМЕНТАРІ: 153
@lucapolonia7152
@lucapolonia7152 3 роки тому
1. 4:10 Group related information 2. 5:25 Create contrast through font-size 3. 6:45 Create more contrast through font-weight 4. 7:34 Add contrast through color 5. 10:30 Increase the line-height of the body 6. 12:50 Decrease the line-height of large text
@westernpigeon
@westernpigeon 2 роки тому
thank you very much
@slykhajiit2
@slykhajiit2 2 роки тому
We could only wish there were a save button for comments in UKposts...
@joeldcanfield_spinhead
@joeldcanfield_spinhead 4 роки тому
me: I'm pretty good with typography, but Kevin always has at least one point to teach me me, 10 minutes in: d'oh me, 20 minutes in: d'oh! me, 30 minutes in: stop saying that, Joel Excellent stuff, and eager for next week's font fam video.
@Dydreth
@Dydreth 4 роки тому
This is so amazingly helpful. As someone learning front-end, it's easy to get lost in the code and syntax and to forget about effective, compelling layouts.
@Morrile1
@Morrile1 4 роки тому
Awesome in every sense! I am guilty of having text that stretches across the screen, etc., yet when you can see how minor changes produce a more professional look, it makes sense. I am learning so much from you Kevin that I am very delighted, and thankful, that you’re sharing your skills. I now need to purchase the T-Shirt 🤩
@aselast2939
@aselast2939 3 роки тому
I thought you were just another one of those how to make a website youtubers but after watching a couple of your videos I saw that you're actually sharing EXTREMELY IMPORTANT things with us. Thank you.
@michaelriccio6012
@michaelriccio6012 3 роки тому
Man I really love that Kevin includes the points in the description. So helpful.
@abhiinspired
@abhiinspired 3 роки тому
I just started learning Front end dev. And you are really helpful. Thank you very much. Online course gave me the broad strokes. Your videos are helping me to know about the fine strokes of coding. Look! I started using your text layout tips. It's just sunk in. Thanks a lot!
@oskarilehtonen9917
@oskarilehtonen9917 2 роки тому
I love this video! You don’t just show examples what looks good, but you are explaining why those things is good to use.
@Zacban
@Zacban 2 роки тому
So glad I found this channel. Thanks for opening the lid on css Kevin. Been bingewatching you all week
@jenstornell
@jenstornell 4 роки тому
The ch unit was new to me. Really nice! 👍
@luiscolome75
@luiscolome75 4 роки тому
The ch unit (I hear about it here in this channel) is really fun to play with. You'll see ;)
@zachfenton608
@zachfenton608 2 роки тому
Same for me
@rudrapratapsinha8880
@rudrapratapsinha8880 2 роки тому
It means chutiya unit, search on Google about it.
@erichobbs4042
@erichobbs4042 4 роки тому
Another top lesson. Really learning a lot about design from these.
@paulsmith9649
@paulsmith9649 4 роки тому
Just recently come across your youtube channel by mistake, and Ive got to say a huge big thank you. Im just getting back into learning code (HTML, CSS and JS), and Ive spent many, many hours trying to find someone who can explain things to me in a way that I can actually understand. Ive designed a few websites in the past but I really needed to find the best work flow for me. I personally use Adobe's XD software to actually design and map out my projects, but Im having the problem of learning how to code said design into an actual website. Keep up the great content.
@BaptisteLegrand
@BaptisteLegrand 4 роки тому
It's a long journey! But a rewarding one :)
@miles611
@miles611 2 роки тому
Man, I've been learning so much Front End & CSS stuff thanks to you Kevin. Thanks mate! Subscribed
@digigoliath
@digigoliath 4 роки тому
Great Design tips Kevin. Looking forward to more Web Design videos like this! Thank you!!
@taariqq
@taariqq 3 роки тому
I was asking for design videos. You already have design videos! Great video!
@withinbracket7830
@withinbracket7830 2 роки тому
Every time i need UI design tips and tricks there's no place quite like this channel. :)
@mikejackson7230
@mikejackson7230 4 роки тому
You should make this into a series! Typography, colors/shadows, buttons.. Or something!
@KevinPowell
@KevinPowell 4 роки тому
That's the plan :) I'll be looking at picking fonts next week :)
@cipherxen2
@cipherxen2 3 роки тому
I can't see your comment
@coderbdev
@coderbdev 4 роки тому
Thanks for this! Like most of us, I constantly struggle with layout. The bonus tip was perfect for me, I needed to know what was a good width. :) VERY helpful!
@losrobbosful
@losrobbosful 4 роки тому
This was the most helpful video on web-design that I ever watched. You really can break things down in a way that an ordinary person like me, for whom designing even basics is absolutely not intuitive and often like a mystery, can now finally get it. I just styled my first shopping card on codepen according to your video. And I am looking at it and think "Really? I just did that?" Thanks Kevin. Now I really consider shifting more from backend to frontend coding :)
@KevinPowell
@KevinPowell 4 роки тому
Really glad that it helped you out!
@MikePiligrim
@MikePiligrim 2 роки тому
This awesome tutorial literally illustrates the Robin Williams' book, the one I definitely recommend everyone, the one became my first and most important guide to the basic principles of general design. I mean, great video, man!
@fivebyfivesound
@fivebyfivesound 4 роки тому
Just stepping into web design. Super helpful. Thanks!
@siddhantjain2402
@siddhantjain2402 4 роки тому
Kevin, I really love it when you design things on Figma. I would actually think it will be a great learning experience to see you design something from an imaginary concept. :)
@KevinPowell
@KevinPowell 4 роки тому
I have something planned like that for a few weeks from now 😁
@siddhantjain2402
@siddhantjain2402 4 роки тому
@@KevinPowell 😍😍
@nikhilmwarrier7948
@nikhilmwarrier7948 3 роки тому
The line-height part is something I always mess up. But now I finally got it. 1rem font + 1.5rem line-height and a color of rgb(30, 30, 30) works really well for me... Thanks a lot...
@anoopvasudevan
@anoopvasudevan 3 роки тому
This is invaluable content! Thank you Kevin.
@MrsJaydot
@MrsJaydot 4 роки тому
Watched the video, then went over to site I'm working on and added padding to the containers to make the text less wide:). Nice. And I'd forgotten all about the ch unit, must use that more often. Thanks!
@whitebear224
@whitebear224 3 роки тому
I love this channel so much. I just started learning HTML and CSS and this is great content. Cheers!
@turinumugishasouvenir5815
@turinumugishasouvenir5815 3 роки тому
a very awesome course that i've been searching for long. you are the best with it
@JamesWHurst
@JamesWHurst 2 роки тому
Superb work with this video, Keven. Thank you.
@zipitrik1
@zipitrik1 4 роки тому
Just discovered your channel , watched 3 videos so far and you've already helped me improved my design and skills 10 fold !! THANK YOU SO MUCH, please keep on doing what you're doing. Quick question if I may (and chat can answer too) Do "pros" use justified at all for text ? I find that sometimes it looks great but often it creates huge spaces between words...
@wanjoplangwansai
@wanjoplangwansai 4 роки тому
That was very informative Kevin... I will surely follow these tips. Thanks again..
@pavel2058
@pavel2058 3 роки тому
This is incredibly useful - I can make sites very well but some things just seem of and I didn't know why. Thank you, you are a damn blessing I should be paying you!
@JonasStenmarkMT
@JonasStenmarkMT 3 роки тому
This one earnt my sub - for whatever that is worth! Great content, keep it up man!
@subhasrini2706
@subhasrini2706 Рік тому
Extremely helpful video I've seen based on typography! Love you Kevin....
@luiscolome75
@luiscolome75 4 роки тому
As always a pleasure to see your videos. Really nice tips about fonts. I'm going to work on a couple of designs I'm working at the moment, to see if I can apply some of these tips. Would be nice if you make a video on how to pair typography. Specialy Google fonts, which are the most popular. Thanks again for another great peace of content Kevin!!
@KevinPowell
@KevinPowell 4 роки тому
That's the plan for next week!
@CameronFlint07
@CameronFlint07 Рік тому
This is really, really helpful for developers like me who want a practical field guide to basic design. Thank you.
@abhayganti8662
@abhayganti8662 3 роки тому
My designs automatically just seem a lot better right now after watching this amazing video.
@chrishd3210
@chrishd3210 3 роки тому
Sort of off-topic, but if you take a line of text in Figma, group it and apply Auto Layout, you can add a fill colour and also padding to create a truly dynamic button. Better than having a grouped layer with a Rectangle shape for the background and a text layer above.
@s0urp0wer5
@s0urp0wer5 3 роки тому
Kevin, you're the CSS GOAT! Keep it up!
@sirisiri2416
@sirisiri2416 3 роки тому
Excellent, so fresh explained and easely! I loved the pig!! So great. :D
@user-pm4vd6ij8i
@user-pm4vd6ij8i 2 роки тому
This tutorial is awesome. Thank you very much!
@harshaniedirisinghe6413
@harshaniedirisinghe6413 3 роки тому
your teaching is very clear. 💖 Thank you so much
@maniek891231
@maniek891231 3 роки тому
Thanks for that, learned a lot about text here !
@simeongeorgiev1107
@simeongeorgiev1107 3 роки тому
thank you so much for the time you put in this video and for the great information you provided to us!!!
@gouisedeau
@gouisedeau 2 роки тому
Thanks for these good advices!
@brunorocha9898
@brunorocha9898 2 роки тому
well done.. thank you for the video.. straight to point.. a lot of good information
@abdishakur2489
@abdishakur2489 4 роки тому
Awesome video. Thanks Kevin 😍
@nishanthsalian7262
@nishanthsalian7262 3 роки тому
Awesome Video Kevin. Thanks a Lot.
@smsibasish
@smsibasish 4 роки тому
Totally agree with the tips✌️
@tobyflenderson7176
@tobyflenderson7176 4 роки тому
You again
@SuperVOVANCHO
@SuperVOVANCHO 3 роки тому
very useful and quick, thanks
@joaomatos1144
@joaomatos1144 3 роки тому
2021: This guy is THE legend!!!!
@zaenalmaestro7711
@zaenalmaestro7711 2 роки тому
Thanks for your video. I was learn a lot about web design.
@winstonmisha
@winstonmisha 3 роки тому
For the last tip you can use this: p { width: clamp(40ch, 50%, 75ch); }. This solution is responsive and keeps the characters on each line between the 40 and 75 range.
@chandukhaleja
@chandukhaleja 4 роки тому
Worth watching 😄
@fullstackprojects5615
@fullstackprojects5615 2 роки тому
Amazing! Thank you
@afzalmahmudd8365
@afzalmahmudd8365 2 роки тому
A free course. Thank you.
@carywalski8179
@carywalski8179 2 роки тому
Good stuff. Thanks for the video! One of the things that I try to do with my typography designs is making sure that it's consistent across the website, and that I don't invent too many idiosyncratic type treatments (e.g., this font style is only used in this type of box, etc.). Is that something that you try to do too or do you not sweat it so much?
@learningtostream3919
@learningtostream3919 2 роки тому
Love this thank you.
@YTCrazytieguy
@YTCrazytieguy 2 роки тому
Really good info!
@nazsnet
@nazsnet 3 роки тому
You only get this detailed from an InDesign pro. Great video!
@hamedbahram
@hamedbahram 4 роки тому
Hey Kevin, been following your videos recently, have learned a lot and started to like css and realize the power and the cool things you can do with it. So thank you. Got a quick question, how do you compare the Figma application you were using in this video with Webflow? curious to know your take on it.
@KevinPowell
@KevinPowell 4 роки тому
Well, Figma is a design tool, Webflow is to actually makes sites. Figma/XD/Sketch are just for design that then needs to actually get built by a developer.
@piesho
@piesho 4 роки тому
In the last example, paint the title and the button with the color of the hands making a hearth in the image. That's the element that is going to put the text and the image together.
@bodzu6207
@bodzu6207 3 роки тому
Very nice video, I checked others and finally sub+
@queenofpain6483
@queenofpain6483 2 роки тому
Dude I’m from Concordia University and I’m watching this!
@charlesch3ng
@charlesch3ng 3 роки тому
Just intuitively, the reasons I came up with as to why long lines of text aren't good: 1. the distance your eyes would need to travel to move to the next line increases, which strains the eyes and also increases your chance of moving to the wrong line. 2. when we see a block of text, our instinct to read is triggered, whereas one long line starts to look like a design element, something that's meant to be looked at and not processed. 3. long lines are like long sentences, they are more stressful to process
@deansprivatearchive
@deansprivatearchive 2 роки тому
Personally, my eyes won't stop looking at the light gray description for the 3rd complex example due to the simple design. I don't know why, but I've gotten used to glancing at the important background stuff but not really reading it.
@gingerkiwidev
@gingerkiwidev 2 роки тому
Typography. Is. Awesome. :-D All of it! From calligraphy &illuminated manuscripts, to print & typewriters, to digital & animation.
@haskomeyer4924
@haskomeyer4924 3 роки тому
front-end dev Ron Smith seems to be a really nice guy :)
@svneverforever
@svneverforever 3 роки тому
As a print designer trying to learn CSS, none of this was news, but its good to remember when you are fighting with code that the old rules still apply :-)
@nurulhasan2870
@nurulhasan2870 Рік тому
Really Great.
@iliankarasimirov9685
@iliankarasimirov9685 3 роки тому
You are awesome and thanks
@sumanth3036
@sumanth3036 4 роки тому
Thanks a lot
@turinumugishasouvenir5815
@turinumugishasouvenir5815 3 роки тому
you're on top
@philip9677
@philip9677 4 роки тому
Hey kevin was wondering best way to layout padding for a website that is with h1, h2 and p tags also do i set padding on the container or on the text tags
@KevinPowell
@KevinPowell 4 роки тому
I'll use margin to create spacing, rather than padding. I reserve padding only if there is a background-color on something. I tend to remove the margin-top from all my text elements and only play with margin-bottom to start with. Things like h3 often will have a somewhat big margin top though.... so it depends? I could do a lot more videos on typography :)
@philip9677
@philip9677 4 роки тому
@@KevinPowell thanks kev, can you a tutorial how you set up a site that takes care of spacing between heading paragraphs and containers, taking into account a container should they container have paddding or the text
@praharshsingh2095
@praharshsingh2095 4 роки тому
I have a questions,should i learn Adobe XD to create the design first and then implement the web page? Or just keep hard coding from scratch.
@KevinPowell
@KevinPowell 4 роки тому
I find it much easier to have a design first.
@ABMA79
@ABMA79 3 роки тому
what about designing a template that will be the base of your entire website, are you aware of this strategy. Do you think you can make a tutorial about this one and also, how to make it responsive? please provide an answer as soon as possible and thanks a lot for your videos. they are very educative.
@bySterling
@bySterling 4 роки тому
Curious, are the DesignModo templates and blocks automatically responsive?
@KevinPowell
@KevinPowell 4 роки тому
Yup yup!
@amyp.575
@amyp.575 4 роки тому
@@KevinPowell Isn't that cheating? Can you tell in the code it was made using it? And will it get me the job?
@michaeloosthuizen2383
@michaeloosthuizen2383 4 роки тому
@@amyp.575 It is cheating, but then so is using old school software line Dreamweaver or new school software like Bootstrap Studio. If you understand the code then those tools are perfectly legitimate productivity enhancements that get you 90 to 95% of the way quickly and then you do the 10 to 5% magic to make it yours. And yes, anyone who knows what to look for can spot machine generated code, no matter how clean it is. Humans have subtle styles of writing code, if you read other people's code a lot you can often tell who wrote what code by the style.
@designmodo
@designmodo 4 роки тому
Hey, yes! You could try the free version and check the exported code, we're sure you will be really surprised by what you will see 🙌
@sanjayupadhyaysanjayupadhyay
@sanjayupadhyaysanjayupadhyay 4 роки тому
Thanks
@deventerprises2640
@deventerprises2640 Рік тому
If there is lot of whitespace you can use watermark in background with a subtle differences in background. opacity:0.666; work good
@romtekch4958
@romtekch4958 4 роки тому
Kevin, you promote building static websites. However, many clients want to be able to edit content themselves these days!
@joel-rg8xm
@joel-rg8xm 4 роки тому
Great content you share as always, your arms' unstoppable movements are kind of distracting though :)
@KevinPowell
@KevinPowell 4 роки тому
Sorry about that!
@jdeso3
@jdeso3 4 роки тому
Can you tell me does Autoprefixer by mrminc work on Mac OSX
@KevinPowell
@KevinPowell 4 роки тому
Shouldn't work regardless of operating system
@jdeso3
@jdeso3 4 роки тому
@@KevinPowell what I think I figured out is that if it doesn't need to be auto prefixed then it won't do anything and I think that was the case with the code I was using I assume that is correct that it won't auto prefix unless it's needed. Thanks for answering me.
@nah8699
@nah8699 3 роки тому
Hi Kevin your tutorials are very good and helpful, but you always work with light themed design. I would appreciate if you give us tips on how to make a dark themed design look better.
@Gaius_Julius_Caesar_Augustus
@Gaius_Julius_Caesar_Augustus Рік тому
Agree
@MobileDeveloper1965
@MobileDeveloper1965 Рік тому
What software are you using?
@nickygello9105
@nickygello9105 2 роки тому
God Bless sir ^_^
@mukeshnegi9720
@mukeshnegi9720 4 роки тому
I am 7th one viewing this video i am happy and love your videos. I have started my career as react developer and your css videos helps a lot in understanding css concepts
@farookahmed4496
@farookahmed4496 2 роки тому
KP u r awesome.
@StanielBG
@StanielBG 3 роки тому
Front-end Developers should always have a basic design skills, even if working with already made designs.
@peoplethesedaysberetarded
@peoplethesedaysberetarded 3 роки тому
Content starts at 3:23.
@CelineCarey
@CelineCarey 4 роки тому
3:23
@polinardkoffi1309
@polinardkoffi1309 3 роки тому
iI can't beleive that this course is for free
@violet-trash
@violet-trash 4 роки тому
What sorcery is this 'ch'?
@KevinPowell
@KevinPowell 4 роки тому
Haha, it's a fun one. I don't get why it doesn't get more love.
@JohnMervinancheta
@JohnMervinancheta 4 роки тому
What app is that
@KevinPowell
@KevinPowell 4 роки тому
I was designing in Figma
@Noturnus1976
@Noturnus1976 2 роки тому
Kevin. I am a web developer and I have a stylesheet I use on ALL apps I make. It is funcional, but not amazing. I am considering paying someome to improve it. Do you have interest?.How much would you ask for a job like this? It is not a website. It is a stylesheet for webapps. Lots of forms, tables, charts, etc...
@Alexandra-Rex
@Alexandra-Rex 2 роки тому
Really!
@passocabrs
@passocabrs 4 роки тому
How i can "translate" the projects created on figma/adobexd to a real html/css file? there's some quick way to do or just copy the the values of each atribute?
@KevinPowell
@KevinPowell 4 роки тому
I have some videos where I do it. I wouldn't copy the properties they give for positioning, or it's going to be a *very* static and fragile layout. These are design tools, not tools to actually build a webpage. For that, it means learning HTML & CSS, or other tools for making designs into websites like Webflow.
@michaeloosthuizen2383
@michaeloosthuizen2383 4 роки тому
My tip: Alignment. Text should line up with other elements on the page, other elements on the page should line up with text. Vertical alignments are obvious but horizontal alignments can be more subtle. Using the pig as an example: I would draw a horizontal lines across the top and bottom of the body of the pig, then size and space the text and button so that they fill that space. If that sizing becomes awkward I would adjust the size of the pig until a comfortable balance is found. When you look at it without consciously focusing on one particular element your eyes should be relaxed and naturally flow from highest to lowest contrast elements without eye strain. Always keep in mind that bad design can be physically painful to look at because of eye strain. This can be one of the reasons why someone really dislikes a design but can't put their finger on why exactly.
@dainiusfigoras
@dainiusfigoras 3 роки тому
in testimonial example, do we really don't care who say what? I think quite opposite, if I don't know person, then it really doesn't matter what he/she said.
@Enter-ry7ou
@Enter-ry7ou 4 роки тому
Faith
@guilhermegomes683
@guilhermegomes683 2 роки тому
that $10 in black was absolutely terrible
@flowerofash4439
@flowerofash4439 2 роки тому
why tf I want more lines if I can make fewer lines just longer? having more lines in your paragraph is intimidating and contrary to popular belief it is harder to read
Getting started with Figma: A beginner's guide
43:17
Kevin Powell
Переглядів 217 тис.
Floats, Flexbox, Grid? The progression of CSS layouts
27:00
Kevin Powell
Переглядів 287 тис.
顔面水槽がブサイク過ぎるwwwww
00:58
はじめしゃちょー(hajime)
Переглядів 75 млн
Make your sites look better // Simple tips to picking fonts
16:36
Kevin Powell
Переглядів 52 тис.
10 Timeless Typography Tips
16:40
Flux Academy
Переглядів 49 тис.
Are you using the right CSS units?
6:30
Kevin Powell
Переглядів 437 тис.
Designers Only Need These 6 Fonts. Trash the Rest.
8:10
Flux Academy
Переглядів 611 тис.
Web design tips for developers
21:12
Kevin Powell
Переглядів 98 тис.
6 Tips To Improve Your Typography (ESSENTIAL)
6:36
Satori Graphics
Переглядів 49 тис.
A flexbox trick to improve text wrapping
5:02
Kevin Powell
Переглядів 91 тис.
I never thought of using CSS animations like this before!
10:28
Kevin Powell
Переглядів 58 тис.