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:
Join the Creative Crew here:
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):
Connect with me on:
Website:
Instagram:
Facebook:
Twitter:
TikTok:
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 YouTube 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
Join the Creative Crew here: https://bradhussey.hopp.to/crew-yt
im seeing a sherif teach design
Is it possible to create scaled text on a Wix & Webflow made website? Thank you
Goof luck with browser zooming and accessibility….
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.
Can i use typescale for scaling down paddings and margings between different sections
Thanks. I just use (Google it) Fontisize Clamp Generator. I put the screen sizes as 380 for min and 1100 for max and then put in the min font size I want and the max, and this will generate the clamp.
While the information was decent I still won’t be getting Editor X
þrðmð§m 😠
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! 🙂
I use font-clamp it's solved all of my problems regarding screen sizes.
Before I watch the video i'm going to guess clamp.
Hello, a bit confusing… how does this finaly translate in css?
THE BAIT in the beginning LOL.
Science, History, Mathematics… seems like a winning formula to me 😂great video!