6 simple typography tips to more professional looking sites

Подписаться 912 тыс.

Просмотров 128 тыс.

50% 1

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 RU-vid 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!

Опубликовано:

18 фев 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 154

@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 2 года назад

thank you very much

@slykhajiit2 2 года назад

We could only wish there were a save button for comments in RU-vid...

@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 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 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 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 3 года назад

Man I really love that Kevin includes the points in the description. So helpful.

@abhiinspired 4 года назад

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 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.

@jenstornell 4 года назад

The ch unit was new to me. Really nice! 👍

@luiscolome75 4 года назад

The ch unit (I hear about it here in this channel) is really fun to play with. You'll see ;)

@zachfenton608 2 года назад

Same for me

@rudrapratapsinha8880 2 года назад

It means chutiya unit, search on Google about it.

@Zacban 2 года назад

So glad I found this channel. Thanks for opening the lid on css Kevin. Been bingewatching you all week

@taariqq 3 года назад

I was asking for design videos. You already have design videos! Great video!

@miles611 2 года назад

Man, I've been learning so much Front End & CSS stuff thanks to you Kevin. Thanks mate! Subscribed

@erichobbs4042 4 года назад

Another top lesson. Really learning a lot about design from these.

@digigoliath 4 года назад

Great Design tips Kevin. Looking forward to more Web Design videos like this! Thank you!!

@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...

@JamesWHurst 2 года назад

Superb work with this video, Keven. Thank you.

@mikejackson7230 4 года назад

You should make this into a series! Typography, colors/shadows, buttons.. Or something!

@KevinPowell 4 года назад

That's the plan :) I'll be looking at picking fonts next week :)

@cipherxen2 3 года назад

I can't see your comment

@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!

@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 3 года назад

I love this channel so much. I just started learning HTML and CSS and this is great content. Cheers!

@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 4 года назад

It's a long journey! But a rewarding one :)

@fivebyfivesound 4 года назад

Just stepping into web design. Super helpful. Thanks!

@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...

@withinbracket7830 2 года назад

Every time i need UI design tips and tricks there's no place quite like this channel. :)

@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!

@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!

@subhasrini2706 Год назад

Extremely helpful video I've seen based on typography! Love you Kevin....

@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 4 года назад

Really glad that it helped you out!

@turinumugishasouvenir5815 3 года назад

a very awesome course that i've been searching for long. you are the best with it

@wanjoplangwansai 4 года назад

That was very informative Kevin... I will surely follow these tips. Thanks again..

@CameronFlint07 Год назад

This is really, really helpful for developers like me who want a practical field guide to basic design. Thank you.

@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 4 года назад

I have something planned like that for a few weeks from now 😁

@siddhantjain2402 4 года назад

@@KevinPowell 😍😍

@anoopvasudevan 3 года назад

This is invaluable content! Thank you Kevin.

@JonasStenmarkMT 3 года назад

This one earnt my sub - for whatever that is worth! Great content, keep it up man!

@user-pm4vd6ij8i 2 года назад

This tutorial is awesome. Thank you very much!

@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.

@sirisiri2416 3 года назад

Excellent, so fresh explained and easely! I loved the pig!! So great. :D

@abhayganti8662 3 года назад

My designs automatically just seem a lot better right now after watching this amazing video.

@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 4 года назад

That's the plan for next week!

@harshaniedirisinghe6413 3 года назад

your teaching is very clear. 💖 Thank you so much

@s0urp0wer5 3 года назад

Kevin, you're the CSS GOAT! Keep it up!

@brunorocha9898 2 года назад

well done.. thank you for the video.. straight to point.. a lot of good information

@simeongeorgiev1107 4 года назад

thank you so much for the time you put in this video and for the great information you provided to us!!!

@gouisedeau 2 года назад

Thanks for these good advices!

@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.

@nishanthsalian7262 3 года назад

Awesome Video Kevin. Thanks a Lot.

@SuperVOVANCHO 3 года назад

very useful and quick, thanks

@abdishakur2489 4 года назад

Awesome video. Thanks Kevin 😍

@YTCrazytieguy 2 года назад

Really good info!

@queenofpain6483 2 года назад

Dude I’m from Concordia University and I’m watching this!

@zaenalmaestro7711 2 года назад

Thanks for your video. I was learn a lot about web design.

@maniek891231 3 года назад

Thanks for that, learned a lot about text here !

@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?

@afzalmahmudd8365 2 года назад

A free course. Thank you.

@fullstackprojects5615 3 года назад

Amazing! Thank you

@learningtostream3919 2 года назад

Love this thank you.

@chandukhaleja 4 года назад

Worth watching 😄

@joaomatos1144 3 года назад

2021: This guy is THE legend!!!!

@smsibasish 4 года назад

Totally agree with the tips✌️

@tobyflenderson7176 4 года назад

You again

@nazsnet 3 года назад

You only get this detailed from an InDesign pro. Great video!

@gingerkiwidev 2 года назад

Typography. Is. Awesome. :-D All of it! From calligraphy &illuminated manuscripts, to print & typewriters, to digital & animation.

@bodzu6207 3 года назад

Very nice video, I checked others and finally sub+

@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 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.

@yunmulu1659 11 дней назад

Thank you Kevin.

@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.

@iliankarasimirov9685 3 года назад

You are awesome and thanks

@nurulhasan2870 2 года назад

Really Great.

@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.

@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 :-)

@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 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 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 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 4 года назад

I find it much easier to have a design first.

@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

@bySterling 4 года назад

Curious, are the DesignModo templates and blocks automatically responsive?

@KevinPowell 4 года назад

Yup yup!

@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 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 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 🙌

@haskomeyer4924 3 года назад

front-end dev Ron Smith seems to be a really nice guy :)

@turinumugishasouvenir5815 3 года назад

you're on top

@sumanth3036 4 года назад

Thanks a lot

@romtekch4958 4 года назад

Kevin, you promote building static websites. However, many clients want to be able to edit content themselves these days!

@deventerprises2640 2 года назад

If there is lot of whitespace you can use watermark in background with a subtle differences in background. opacity:0.666; work good

@sanjayupadhyaysanjayupadhyay 4 года назад

Thanks

@MobileDeveloper1965 Год назад

What software are you using?

@farookahmed4496 2 года назад

KP u r awesome.

@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.

@peoplethesedaysberetarded 3 года назад

Content starts at 3:23.

@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

@jdeso3 4 года назад

Can you tell me does Autoprefixer by mrminc work on Mac OSX

@KevinPowell 4 года назад

Shouldn't work regardless of operating system

@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 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 Год назад

Agree

@joel-rg8xm 4 года назад

Great content you share as always, your arms' unstoppable movements are kind of distracting though :)

@KevinPowell 4 года назад

Sorry about that!

@polinardkoffi1309 3 года назад

iI can't beleive that this course is for free

@nickygello9105 3 года назад

God Bless sir ^_^

@Alexandra-Rex 2 года назад

Really!

@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.

@JohnMervinancheta 4 года назад

What app is that

@KevinPowell 4 года назад

I was designing in Figma

@StanielBG 3 года назад

Front-end Developers should always have a basic design skills, even if working with already made designs.

@guilhermegomes683 2 года назад

that $10 in black was absolutely terrible

@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 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.

@violet-trash 4 года назад

What sorcery is this 'ch'?

@KevinPowell 4 года назад

Haha, it's a fun one. I don't get why it doesn't get more love.

@CelineCarey 4 года назад

3:23

@HaDaGaRa 2 года назад

Pigma :3

@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...

@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.