Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Typography for Designers

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Variable Fonts

2:03 with Hope Armstrong

Variable fonts have dynamic axes, such as Weight, Width, Optical Size, Italic, and Slant. Let's explore!

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Variable fonts are another tool you can add to your responsive toolkit. 0:00
    A variable font is a single font file that behaves like multiple fonts. 0:05
    This is done with axes that can be adjusted to change aspects of the font. 0:10
    Common axes include weight, width, optical sizer, metallic, and slant. 0:15
    A variable font can have a single axis or multiple axes. 0:22
    Consolidating multiple fonts into one has performance advantage, 0:27
    as the file size is smaller and more efficient. 0:31
    It also allows for more variations and type styles dynamically on the screen. 0:34
    One use case for this is adjusting the font depending on the reader's device. 0:41
    For example, you could heighten the X height on smaller screens or 0:45
    you could condense and expand character width as the viewpoint narrows and widens. 0:50
    Let's see some variable fonts in action. 0:56
    Foreday has the ability to adjust between serif and 0:59
    sans serif designs, as well as different weights. 1:04
    Divotvor oscillates between a geometric slab serif to a decorative and 1:08
    ornamental font 1:14
    And it can get even more experimental. 1:27
    Check out this font called in the pines, which looks like branches growing. 1:30
    I hope that inspired you to check out more variable fonts. 1:47
    There's so many creative typographers in the world, and I encourage you to be 1:50
    inspired by the fonts you can include in your next project. 1:55
    I'll see you in the next video as we look into the finer details of typography. 1:58

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up