@zander_whitehurst: Stop guessing your website spacing It’s fairly common to guess font size and line heights for your websites. In this episode I share my guidelines to help you get started. Hero heading font size / line height combos Small: 64px / 72px Medium: 72px / 80px Large: 80px / 96px Hero body text font size / line height combos Small: 16px / 24px Medium: 20px / 28px Large: 24px / 32px Button text font size / line height combos Small: 14px / 20px Medium: 16px / 24px Large: 18px / 28px Label text font size Small: 10px / 16px Medium 12px / 16px Large: 14px / 16px Space between hero text Small: 24px Medium: 32px Large: 40px Likely you’ll build in rems and it’s most common to set 1rem to equal 16px so hopefully that helps guide your rem spacing. #ux #ui #webdesign #design

Zander Whitehurst • UX/UI
Zander Whitehurst • UX/UI
Open In TikTok:
Region: GB
Wednesday 08 May 2024 11:30:50 GMT
132483
8293
51
373

Music

Download

Comments

jonathan_carone
Jonathan :
I prefer using percentages than pixels so it is more responsive to screen size differences.
2024-06-04 16:47:59
20
rj_20o0
rj_2000 :
Most of this is great advice but I wouldn’t recommend consistent spacing between elements, proximity is a key design principle and so placing elements that are related closer together is best practice
2024-05-10 05:21:24
32
beth_jelly
Beth Jelly :
What about between sections?
2024-05-14 22:32:21
10
6265616e
01100010 :
what keycap set is this?
2024-05-08 13:58:13
9
jameski123
James Ski :
Yep, 4 grid or non-linear system, or whatever devs call it nowadays, thats for the win. This dude popping in my feed lately and becoming my fave ui guy in TikTok.
2024-05-12 03:17:54
1
gocesar
Cesar G :
Would this change for mobile?
2024-05-08 13:16:08
8
baragustay
Bara 🏳️‍🌈 :
Omg so good! Can you even recommend some resources of if I want to dig deeper?
2024-05-08 15:31:16
3
missdarkberry_
missdarkberry_ :
I started with UI design almost recently and I would like to know why you prefer Figma instead of Xd.. (I dont mind both apps but maybe Figma is better because of a "reason") 🤷🏻‍♀️
2024-05-08 14:50:02
2
tpukshorts
tpukshorts :
Yeah but quite often you need to compensate elements optically, not geometrically
2024-05-27 12:13:05
0
hademic
hademic :
Tailwind css. Done.
2024-05-08 17:08:57
1
i_am_ugoeze
Ugoeze the designer :
You have a UI/UX design course?
2024-05-08 12:01:19
2
dickkopfelixir
dickkopfelixir :
or 2rem
2024-05-08 11:50:12
3
alvaroguerrerovilla0
Alvaro Guerrero :
sorry random questions what keyboard is that?
2024-05-08 18:39:07
1
ivanalaan
Ivana :
I don't agree. The space between button and bodytext should be more, than the space between title and bodytext. You have to tell the story first, title and bodtext, and then find the call to action.
2024-05-30 20:22:12
0
doggomother
Sunday and Taco’s Mum :
I recommend a small medium large spacing approach. Some visual elements feel heavier, and require more space between them and the next item.
2024-06-04 13:48:39
0
bigfugazi
Fuggie :
Can you create custom Shopify websites?
2024-05-08 11:51:33
0
rupesh2701
rp2701 :
32 is my go-to guy!
2024-05-30 18:07:57
0
rab.ehe
Rab ehe :
i have a quick question if you don't mind : is learning figma variables necessary? i am suffering with them🙂
2024-06-19 19:14:20
0
uinkits
uinkits - Figma Design System :
Is there a Figma plugin for this? 🤔
2024-05-14 09:53:54
0
arqbyte
arqbyte :
I kinda messed up. I did the design but did not make it responsive
2024-07-24 08:18:12
0
devfieldnotes
Max :
two words: font baseline. Tell me whenever you get it.
2024-07-03 23:34:10
0
trevormanhuwa
Trevor Manhuwa :
hi I would love to Collab with you one day. I am a full stack web developer
2024-05-20 10:45:02
0
przemekkowalcom
Przemek Kowal :
What’s that keyboard he using?
2024-05-29 09:29:13
0
heylego1932
DougDoes :
you've probably been asked before. but what keyboard is that please.
2024-06-04 18:32:04
0
pmiiix_
Pmiiix :
Thanksssssssssss, you just saved my life
2024-05-08 13:05:24
0
To see more videos from user @zander_whitehurst, please go to the Tikwm homepage.

Other Videos


About