What's the Perfect Font Size on Any Device in Web Design?
Vložit
- čas přidán 4. 08. 2024
- This is how to scale typography responsively and achieve perfect typography on any device. If you’ve been wondering what the perfect font size on any device is, don’t miss this video.
Subscribe for more web design videos and tutorials: bit.ly/3IUiVpj
Join the Creative Crew here: bradhussey.hopp.to/crew-yt
Looking for perfectly responsive typography? Without a bunch of CSS media queries and looking at different device breakpoints, this can be a pain to figure out. Stop worrying about px vs. em vs. rem for font sizing. The perfect font size for web design isn’t as simple of a question as you might think. Devices come in all different sizes, and pixels (what you might be used to using for selecting font sizes) in terms of sizing, don’t show up the same way on all devices. What will look large on a small phone at 25px, will look tiny on a 4K monitor when viewing the same text.
Enter scale text in Editor X: the solution to this problem. This text scale in Editor X feature will allow you to create prefect responsive text. Web design and text sizing doesn’t have to be difficult with this awesome Editor X feature. Simply enter your smallest value for a font size, and your largest value for a font size. When switching between device breakpoints, Editor X will scale that text based on the range you’ve provided responsively. In today’s video, I’m going to cover some responsive typography tips, discuss golden ratio typography, cover common typography guidelines, and show off this cool feature in Editor X.
Get started with designing your next website with Wix Studio (previously known as Editor X):
bradhussey.hopp.to/wixstudio
Connect with me on:
Website: bit.ly/3DugDfI
Instagram: bit.ly/3uKtjuV
Facebook: bit.ly/3DtW5nD
Twitter: bit.ly/3K2gBy4
TikTok: bit.ly/3Dz3C4E
New to the channel? My name’s Brad Hussey. I'm a web designer and I’ve partnered with Editor X to create an inspiring, educational, and world-class CZcams channel and community for professional web designers and design agencies who are mastering the art, business, and craft of web design. On this channel, I’ll show you how to build websites with little code. I’ll also cover topics like, choosing fonts for web design, layout design for websites, and tons of Editor X tips and tricks videos and guides to get you started on your website creation process.
Learn how to make responsive websites and join us every week for new web designer tutorials, Editor X videos, livestreams, and challenges.
0:00 Perfect Typography on Any Device: How to Scale Typography Responsively
0:45 The Problem with Web Design Font Sizing
1:20 Text Scaling for Web Design
3:38 Editor X Typography with Scale Text
#editorx #webdesign #typography - Věda a technologie
Join the Creative Crew here: bradhussey.hopp.to/crew-yt
Science, History, Mathematics... seems like a winning formula to me 😂great video!
Yeah man! Thanks for watching :)
Newbie here! Thanks for this video! However I am still confused on why you would make the largest so big? 520px? Wouldn't that look way too big? What size breakpoint was that on? Thanks! :)
Thanks for watching! Great question - 520px seems enormous, doesn’t it?! And in most cases, you’re correct, that would be way too big. However, as a stylistic choice on this specific design, we wanted this heading to be a very large font size on the desktop breakpoint :)
@@CreativeCrewCommunity Thanks!
Can i use typescale for scaling down paddings and margings between different sections
You wouldn’t use type scale for that. But you could use relative units, like percent, as your margins and paddings to have a proportional design.
Hello, a bit confusing... how does this finaly translate in css?
We’ll if you’re using Editor X to build this out, then you need not worry about the CSS. If you’re writing CSS, try using clamp()
I use font-clamp it's solved all of my problems regarding screen sizes.
A great CSS trick!
THE BAIT in the beginning LOL.
🤣🤣🤣 Brandon you KNOW I got that CZcams game
@@CreativeCrewCommunity indeeeeed sire!
When you say "choppy" experience, I think we should consider that users usually come with fixed screen sizes and they do not wave like developers' do.
It’s true! But sometimes you get a browser that’s in between screen widths, or a strange resolution and the design doesn’t look exactly as you intended. I like the typography being proportional to the design and viewport.
Before I watch the video i'm going to guess clamp.
Super good guess! In a sense, exactly. It’s basically what’s happening with the Scale Text feature in Editor X.
While the information was decent I still won’t be getting Editor X
all good
Thanks for watching!