CSS: Variable Fonts

CSS: Variable Fonts

CSS: Variable Fonts is an Intermediate level study on Web, crafted by the creator, Morten Rand-Hendriksen. This study is an essential pillar for an individual who needs to sharpen his/her Web skills. It provides you a thorough grip on Web, Web Fonts, CSS, Web, Web Fonts and CSS.

Free Download - CSS: Variable Fonts
Author Morten Rand-Hendriksen
Publish Date 12/10/2019
Skill Intermediate
Duration 1h 2m
Topic CSS
Video Tutorials 21
Last Update N/A

Digital typography has long promised dramatic flexibility, but only delivered it in part. Yes, fonts that change size have become ordinary, and we’ve learned to expect multiple variations in a family, but precisely specifying blends has remained difficult. New fonts and a new CSS specification are changing this, though, letting developers specify many axes beyond font size. It’s now much easier to create attractive and varied pages, using only a single font as the base. In this course, Morten Rand-Hendriksen demonstrates how to use variable fonts to make designs pop while preserving efficient use of bandwidth. Explore the basics of variable fonts—which allow you to download one font file and vary it as required—as well as how to use them in practice and support backwards compatibility.

Topics include:

  • What are variable fonts?
  • The weight, width, slant, and italic variation axes
  • Creating custom variation axes for variable fonts
  • Adding a variable font
  • Using the font-variation-settings property
  • Using custom properties for easier styling
  • Designing typography in the browser
  • Providing fallback fonts for older browsers

CSS: Variable Fonts : Video Lessons

  • Variable fonts: An introduction1m 37s
  • What are variable fonts?3m 44s
  • Some examples of variable fonts4m 16s
  • The variation axis2m 29s
  • Variation: Weight1m 27s
  • Variation: Width1m 42s
  • Variation: Optical size2m 15s
  • Variation: Slant1m 4s
  • Variation: Italic2m 19s
  • Use browser tools to discover axis4m 51s
  • Custom variation axes3m 22s
  • Add a variable font5m 9s
  • Style variable fonts using old properties2m 55s
  • Use the font-variation-settings property4m 11s
  • Interplay between variation axes3m 31s
  • Use custom properties for easier styling6m 38s
  • Design typography in the browser4m 29s
  • Current browser support54s
  • Providing proper fallbacks4m 25s
  • Thanks, that was fun1m 28s

Recommended video tutorials from YouTube.

  • The Future of Web Fonts looks Awesome - Variable Font Tutorial
  • Today's Question: How do you stay focused while working? -- In this video, we're going to take a look at variable fonts, which are a new type of font that gives us ...

  • DateTime : 2018-07-23 14:30:01
  • Source : DesignCourse
  • Variable Fonts on the Web, Explained
  • Variable fonts are the next big thing in web typography. They allow for more creativity and design freedom than web designers have ever had with type before.

  • DateTime : 2018-07-03 18:00:03
  • Source : Envato Tuts+
  • dotCSS 2018 - Mandy Michael - Variable Fonts and the Future of Web Design
  • Filmed at https://2018.dotcss.io on November 8th in Paris. More talks on https://dotconferences.com/talks The web is entering a new era of design opportunities ...

  • DateTime : 2018-12-14 14:19:51
  • Source : dotconferences
HELP THE AUTHOR

Please consider buying this course - CSS: Variable Fonts directly from the author - Morten Rand-Hendriksen. This way you could help the author create more great content, also you may get personal help.

The links being shared are only for poor students who really cannot afford to pay. So, if you are capable of paying please do consider it once before trying the free download links.

Categorised in: , ,

Kindly note, we have recently migrated to a new server. In case of download links not working at all it means that we are undergoing maintenance at the backend. In such case please try after 24 hours. Also make sure your internet connection is persistant else the file may endup corrupted.