[Tin tức] What’s the best font size? A guide for body text in responsive web design
💌 Pimp my Type Newsletter with weekly font recommendations:
📰 Corresponding article with more on UI and display sizes:
⬛️ Example on CodePen:
⚫️ The cool photo magazine I mentioned
TL;DW: Start with your body text and set it at a default size of 1 em, which is calculated as 16 px in most browsers. From there, scale up the font size and ideally also the layout proportionally and make it larger on larger view ports, since we can assume that the viewer is further away.
You want your text to be read, right? Then set it at a sufficient size! But what is a good font size, and how can you apply it in your web or app design? This video has answerers for you with some practical examples focused on body text in responsive web design.
Chapters:
0:00 Intro
1:19 The Holy Trinity of Typography
1:50 Sizes for different kinds of text
2:38 Set it relative to the viewer’s distance
3:50 Example: bad font size
4:18 Responsive font size
7:31 Pimp my Type Newsletter
7:52 Summary
8:08 Outro & Outtakes
4:00 I do not find the font (viewed fullscreen on a 13'' laptop) tiny. In fact, I have scaled down the OS font size to match similar sizes and find it perfectly acceptable. Less font = more content on screen.
Great vid + vocal performance! 🤩 One question, though: Would you differentiate between B2C websites and (perhaps more dense) B2B apps? For the latter, everyone from Jira, Azure, Google Material, IBM Carbon… seems to be working off 14pt body.
Hey man, came across your channel by coincidence. A fortunate coincidence.
I have a suggestion if you take those. I'm setting up a small business, and I've been wondering about designing a unified set of document templates — internal and public facing documents like letters, emails, reports, etc. I would love to see a professional's take on this.
oh my god my new favorite youtuber
I build my own web site . & Base fz for desktop use 18px )
where Blue socks ???🤣
My take: 1rem is the default text size on the device, and is to be set to a size at which text is well readable. So the body text should be 1rem everywhere. An exception to it may be with fonts which appear smaller; they would be scaled up.
Great video! 😀
What Font Clamp Generator can I use that gives me accurate clamp CSS line?
SIZE IT UP!
LOL… I am just getting into web and video design, so I appreciate your video. I know it is very possible to $#@! it up, as I have done it. Thanks again.
Really, your video are sooo funny, and interesting obviusly 😁
Great sutff!
hey wat do use to record vid
You're so funny and likeable! Thanks for the great content
When Fonts like Open Sans are so much bigger than Times New Roman how can you compare sizes except side by size! So what is the point of the pixel to point comparisons??
Then there is the problem of which do I go by? Pixels, points, ems…whatever!
Body text for Books vs website:
Then, for these people who think reading a is why mobile phones were invented! Yikes!
Then there is the question of scaling up or down electronically with the zoom function!
thank you mr pimp
This is the best video so far in explaining all these basics! Really fun it easy to understand and love the intro!
Making my first website project for a Web dev course….this is really helpful, and you're cute. Subscribed x
what about headings?
Very useful, thank you
PLEASE NO SING AT THE START! actually its cool!
Thank you for this one!
Bruhhhhh, just came across this channel, and man, you deserve a 100k subs, hahaha.
Feels very pure and natural.
Just subscribed to your newsletter 🙂
new to your channel. Saw you on the Josh Hall Pod and really liked your insight. Great stuff.
I just found your channel and I'm binge watching everything!!
Amazing content!! Keep it up 🙌🏻
Very entertaining and good info. Thanks for the tips and the laughs!
4:00 – that's what she said
Wow that iphone 5 tho 😳
Why not use the clamp function in 2021 ?
Should we use rem or pixels for fonts size?
Very nice! Thank you.
So funny. Thank you! OK, so I'm making a website with Wix and have a question: is the px size the same as the 'font size'? e.g. is 16px the same as font size 16? (asking for a friend)
Nice vlog, can you suggest Google something about this ugly emojis 😅
Thank you!
Best episode so far 😀
Thank you 🙂