Category:

Tutorial

Duration: 19:42

3,721 views

101

In this video you’ll learn how to define the typography sizing for your responsive website using fluid typographic scales. ► Download unlimited creative assets with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_SZYx4Jo5S3M&utm_medium=referral&utm_source=youtube.com&utm_content=description

Read more on How to Create Fluid Typographic Scales for Your Responsive Website on Envato Tuts+: https://webdesign.tutsplus.com/tutorials/fluid-typographic-scales-for-responsive-website--cms-39748?utm_campaign=yt_tutsplus_SZYx4Jo5S3M&utm_medium=referral&utm_source=youtube.com&utm_content=description

Other useful resources:

• Type Scale Basics: https://codepen.io/adipurdila/pen/BawQzde
• Fluid Type Scales: https://codepen.io/adipurdila/pen/WNZoxgQ
• Creating a Figma Design System: Typography, Spacing, and Sizing: https://www.youtube.com/watch?v=FsdG6uwJ_vc
• A Beginner’s Guide to Using Typographic Scales: https://webdesign.tutsplus.com/courses/a-beginners-guide-to-using-typographic-scales?utm_campaign=yt_tutsplus_SZYx4Jo5S3M&utm_medium=referral&utm_source=youtube.com&utm_content=description
• Precise control over responsive typography - MadeByMike: https://www.madebymike.com.au/writing/precise-control-responsive-typography/
• Type Scale - A Visual Calculator: https://type-scale.com/
• Tim Brown: Molten leading (or, fluid line-height): https://tbrown.org/notes/2012/02/03/molten-leading-or-fluid-line-height/

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_SZYx4Jo5S3M&utm_medium=referral&utm_source=youtube.com&utm_content=description

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_SZYx4Jo5S3M&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - fluid design