1
00:00:00,378 --> 00:00:05,090
Variable fonts are another tool you
can add to your responsive toolkit.

2
00:00:05,090 --> 00:00:10,402
A variable font is a single font file
that behaves like multiple fonts.

3
00:00:10,402 --> 00:00:15,568
This is done with axes that can be
adjusted to change aspects of the font.

4
00:00:15,568 --> 00:00:22,733
Common axes include weight, width,
optical sizer, metallic, and slant.

5
00:00:22,733 --> 00:00:27,321
A variable font can have a single axis or
multiple axes.

6
00:00:27,321 --> 00:00:31,836
Consolidating multiple fonts into
one has performance advantage,

7
00:00:31,836 --> 00:00:34,963
as the file size is smaller and
more efficient.

8
00:00:34,963 --> 00:00:41,044
It also allows for more variations and
type styles dynamically on the screen.

9
00:00:41,044 --> 00:00:45,895
One use case for this is adjusting
the font depending on the reader's device.

10
00:00:45,895 --> 00:00:50,642
For example, you could heighten
the X height on smaller screens or

11
00:00:50,642 --> 00:00:56,679
you could condense and expand character
width as the viewpoint narrows and widens.

12
00:00:56,679 --> 00:00:59,539
Let's see some variable fonts in action.

13
00:00:59,539 --> 00:01:04,097
Foreday has the ability to
adjust between serif and

14
00:01:04,097 --> 00:01:08,762
sans serif designs,
as well as different weights.

15
00:01:08,762 --> 00:01:14,706
Divotvor oscillates between a geometric
slab serif to a decorative and

16
00:01:14,706 --> 00:01:16,098
ornamental font

17
00:01:27,060 --> 00:01:30,227
And it can get even more experimental.

18
00:01:30,227 --> 00:01:34,979
Check out this font called in the pines,
which looks like branches growing.

19
00:01:47,213 --> 00:01:50,586
I hope that inspired you to
check out more variable fonts.

20
00:01:50,586 --> 00:01:55,151
There's so many creative typographers
in the world, and I encourage you to be

21
00:01:55,151 --> 00:01:58,619
inspired by the fonts you can
include in your next project.

22
00:01:58,619 --> 00:02:02,790
I'll see you in the next video as we look
into the finer details of typography.