6 simple typography tips to more professional looking sites
ฝัง
- เผยแพร่เมื่อ 10 ก.พ. 2025
- Check out Designmodo's Slides: designmodo.com...
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.kevinpowel...
---
Help support my channel
Get a course: www.kevinpowel...
Buy the t-shirt: teespring.com/...
Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstu...
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 TH-cam channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
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
thank you very much
We could only wish there were a save button for comments in TH-cam...
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.
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.
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.
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 🤩
Man I really love that Kevin includes the points in the description. So helpful.
Every time i need UI design tips and tricks there's no place quite like this channel. :)
I love this video! You don’t just show examples what looks good, but you are explaining why those things is good to use.
So glad I found this channel. Thanks for opening the lid on css Kevin. Been bingewatching you all week
The ch unit was new to me. Really nice! 👍
The ch unit (I hear about it here in this channel) is really fun to play with. You'll see ;)
Same for me
It means chutiya unit, search on Google about it.
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.
It's a long journey! But a rewarding one :)
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!
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!
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...
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. :)
I have something planned like that for a few weeks from now 😁
@@KevinPowell 😍😍
Superb work with this video, Keven. Thank you.
I was asking for design videos. You already have design videos!
Great video!
Extremely helpful video I've seen based on typography! Love you Kevin....
This is really, really helpful for developers like me who want a practical field guide to basic design. Thank you.
Man, I've been learning so much Front End & CSS stuff thanks to you Kevin.
Thanks mate! Subscribed
Another top lesson. Really learning a lot about design from these.
My designs automatically just seem a lot better right now after watching this amazing video.
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 :)
Really glad that it helped you out!
You should make this into a series! Typography, colors/shadows, buttons.. Or something!
That's the plan :)
I'll be looking at picking fonts next week :)
I can't see your comment
Just stepping into web design. Super helpful. Thanks!
a very awesome course that i've been searching for long. you are the best with it
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!
This one earnt my sub - for whatever that is worth! Great content, keep it up man!
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.
I love this channel so much. I just started learning HTML and CSS and this is great content. Cheers!
This tutorial is awesome. Thank you very much!
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!
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!
Great Design tips Kevin. Looking forward to more Web Design videos like this! Thank you!!
This is invaluable content! Thank you Kevin.
well done.. thank you for the video.. straight to point.. a lot of good information
Dude I’m from Concordia University and I’m watching this!
2021: This guy is THE legend!!!!
Excellent, so fresh explained and easely!
I loved the pig!! So great. :D
Kevin, you're the CSS GOAT! Keep it up!
your teaching is very clear. 💖 Thank you so much
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.
A free course. Thank you.
Typography. Is. Awesome. :-D
All of it! From calligraphy &illuminated manuscripts, to print & typewriters, to digital & animation.
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!!
That's the plan for next week!
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.
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 :-)
Thanks for your video. I was learn a lot about web design.
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.
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.
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
Thanks for these good advices!
very useful and quick, thanks
Really good info!
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...
Awesome Video Kevin. Thanks a Lot.
Worth watching 😄
front-end dev Ron Smith seems to be a really nice guy :)
thank you so much for the time you put in this video and for the great information you provided to us!!!
Totally agree with the tips✌️
You again
Amazing! Thank you
That was very informative Kevin... I will surely follow these tips. Thanks again..
Thanks for that, learned a lot about text here !
Thank you Kevin.
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.
Love this thank you.
Kevin, you promote building static websites. However, many clients want to be able to edit content themselves these days!
Very nice video, I checked others and finally sub+
Awesome video. Thanks Kevin 😍
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?
You only get this detailed from an InDesign pro. Great video!
If there is lot of whitespace you can use watermark in background with a subtle differences in background. opacity:0.666; work good
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.
you're on top
Really Great.
Front-end Developers should always have a basic design skills, even if working with already made designs.
Curious, are the DesignModo templates and blocks automatically responsive?
Yup yup!
@@KevinPowell Isn't that cheating? Can you tell in the code it was made using it? And will it get me the job?
@@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.
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 🙌
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.
iI can't beleive that this course is for free
What software are you using?
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.
I find it much easier to have a design first.
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
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 :)
@@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
Great content you share as always, your arms' unstoppable movements are kind of distracting though :)
Sorry about that!
that $10 in black was absolutely terrible
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
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.
Agree
Thanks a lot
I usually like your videos buy I find this one too long for the content. Some keys highlights would be good .
Can you tell me does Autoprefixer by mrminc work on Mac OSX
Shouldn't work regardless of operating system
@@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.
KP u r awesome.
For your last tip... NEVER design "Mobile First"!
It is the weirdest thing ever, and I had been in this industry for 9 years, 5 as a Front-end Dev, at least 2 or 3 as UI, and now learning UX as well in London. I studied "Web Design and Design for Mobile Devices" 9 years ago ("Responsive Design": When the term was just starting to be a thing). "Mobile First" just works in a developers perspective, and just to be lazy. The complex design should always be first, then moving to Mobile and Tablet is damn easy. The fact that Mobile can contain more generic styles, that work sitewide in every screen, and then you add complexity through media-queries for bigger screens, doesn't mean you can't have "clean" and "dry" code the opposite way around, if you are a good developer.
In a designers perspective it doesn't make any sense either, the whole design will end up weaker, following its least common denominator. The fact that > 50% of the people use a phone now a days isn't an excuse or reason either to design this way.
Just stop with that weird view, that's what causes the problems in your last tip. "Mobile First" was a fucking/weird term that just became viral out-of-the-blue and has never had ANY sense. A chain is only as strong as its weakest link.
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.
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
Thanks
What app is that
I was designing in Figma
God Bless sir ^_^
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?
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.
What sorcery is this 'ch'?
Haha, it's a fun one. I don't get why it doesn't get more love.
Really!
Really really really 😂
Have you seen the price for the slides? You should be ashamed of suggesting it, but you are not, of course, it is a sponsor...
I donno, their audience is people who will be selling their services, so either freelancers or small agencies. At $250/year, most will be covering the cost of it as a fraction of one project, so I honestly don't find it too expensive at all. If you're just a hobbyist or working on a personal site, then I'd totally agree that the price isn't worth it at all.
I also have stopped working with sponsors. I only worked with ones that I honestly thought are decent products, mostly with tools I actually use, or have used in the past, but at one point I decided it wasn't really for me.