Type that moves
With variable fonts, there’s no need to compromise typography and design for performance. Variable fonts can respond and adapt to factors like screen size and resolution to optimize design fidelity, readability, and legibility all with just a few lines of CSS. Single files can be used in place of much larger, costlier groups of related font files. This smaller file size allows for faster load time and decreased bandwidth costs. Working with a variable font can futureproof your design system, as it will give you access to styles better suited to your needs as your brand evolves. Explore some fonts below, or learn more about what you can do.
AdaptItalic Variable
by
SuperType
Convenience
Instance
Custom
- Thin Italic
- Light Italic
- Semilight Italic
- Regular Italic
- Medium Italic
- Bold Italic
- Extrabold Italic
- Black Italic
- Narrow Thin Italic
- Narrow Light Italic
- Narrow Semilight Italic
- Narrow Regular Italic
- Narrow Medium Italic
- Narrow Bold Italic
- Narrow Extrabold Italic
- Narrow Black Italic
- Condensed Thin Italic
- Condensed Light Italic
- Condensed Semilight Italic
- Condensed Regular Italic
- Condensed Medium Italic
- Condensed Bold Italic
- Condensed Extrabold Italic
- Condensed Black Italic
- Compact Thin Italic
- Compact Light Italic
- Compact Semilight Italic
- Compact Regular Italic
- Compact Medium Italic
- Compact Bold Italic
- Compact Extrabold Italic
- Compact Black Italic
- Compressed Thin Italic
- Compressed Light Italic
- Compressed Semilight Italic
- Compressed Regular Italic
- Compressed Medium Italic
- Compressed Bold Italic
- Compressed Extrabold Italic
- Compressed Black Italic
Axes
wdth
100
wght
100
-
wdth40100
-
wght100900
Size
100
-
16150
CSS
CSS Copied
Area Variable
by
Blaze Type
It’s a trap!
Instance
Custom
- Thin
- Regular
- SemiBold
- Bold
- ExtraBold
- Black
- Thin Italic
- Regular Italic
- SemiBold Italic
- Bold Italic
- ExtraBold Italic
- Black Italic
- Inktrap Thin
- Inktrap Regular
- Inktrap SemiBold
- Inktrap Bold
- Inktrap ExtraBold
- Inktrap Black
- Inktrap Thin Italic
- Inktrap Regular Italic
- Inktrap SemiBold Italic
- Inktrap Bold Italic
- Inktrap ExtraBold Italic
- Inktrap Extrablack Italic
- Extended Thin
- Extended Regular
- Extended SemiBold
- Extended Bold
- Extended ExtraBold
- Extended Black
- Extended Thin Italic
- Extended Regular Italic
- Extended SemiBold Italic
- Extended Bold Italic
- Extended ExtraBold Italic
- Extended Black Italic
- Inktrap Extended Thin
- Inktrap Extended Regular
- Inktrap Extended SemiBold
- Inktrap Extended Bold
- Inktrap Extended ExtraBold
- Inktrap Extended Black
- Inktrap Extended Thin Italic
- Inktrap Extended Regular Italic
- Inktrap Extended Semibold Italic
- Inktrap Extended Bold Italic
- Inktrap Extended ExtraBold Italic
- Inktrap Extended Black Italic
Axes
INKT
wght
100
wdth
100
slnt
-
INKT0100
-
wght100900
-
wdth100200
-
slnt-100
Size
100
-
16150
CSS
CSS Copied
Inge Variable
by
Fer Cozzi
recuéstate y relájate
Instance
Custom
- Backslanted
- Upright
- Slanted
Axes
slnt
-
slnt-2020
Size
100
-
16150
CSS
CSS Copied
Job Clarendon Variable
by
DJR
Peak Font Performance
Instance
Custom
- Hairline
- Thin
- Extra Light
- Light
- Regular
- Medium
- Semi Bold
- Bold
- Extra Bold
- Black
Axes
wght
400
-
wght1900
Size
100
-
16150
CSS
CSS Copied
Marlide Disp Variable
by
Kontour
Flamingos!
Instance
Custom
- Light
- Regular
- Medium
- Bold
- ExtraBold
- Heavy
Axes
wght
100
-
wght300900
Size
100
-
16150
CSS
CSS Copied
Vinila Variable
by
Plau
Música de dança
Instance
Custom
- Compressed Thin
- Compressed Light
- Compressed Regular
- Compressed Bold
- Compressed ExtraBold
- Compressed Black
- Compressed Thin Oblique
- Compressed Light Oblique
- Compressed Oblique
- Compressed Bold Oblique
- Compressed ExtraBold Oblique
- Compressed Black Oblique
- Condensed Thin
- Condensed Light
- Condensed Regular
- Condensed Bold
- Condensed ExtraBold
- Condensed Black
- Condensed Thin Oblique
- Condensed Light Oblique
- Condensed Oblique
- Condensed Bold Oblique
- Condensed ExtraBold Oblique
- Condensed Black Oblique
- Thin
- Light
- Regular
- Bold
- ExtraBold
- Black
- Thin Oblique
- Light Oblique
- Oblique
- Bold Oblique
- ExtraBold Oblique
- Black Oblique
- Extended Thin
- Extended Light
- Extended Regular
- Extended Bold
- Extended ExtraBold
- Extended Black
- Extended Thin Oblique
- Extended Light Oblique
- Extended Oblique
- Extended Bold Oblique
- Extended ExtraBold Oblique
- Extended Black Oblique
Axes
wdth
100
wght
100
slnt
-
wdth75125
-
wght100900
-
slnt-100
Size
100
-
16150
CSS
CSS Copied
Magmatic Variable
by
Occupant Fonts
Off-the-shelf
Instance
Custom
- Compressed Black
- Compressed Bold
- Compressed Regular
- Compressed Light
- Compressed ExtraLight
- Compressed Thin
- Condensed Black
- Condensed Bold
- Condensed Regular
- Condensed Light
- Condensed ExtraLight
- Condensed Thin
- Black
- Bold
- Regular
- Light
- ExtraLight
- Thin
- Wide Black
- Wide Bold
- Wide Regular
- Wide Light
- Wide ExtraLight
- Wide Thin
- Extended Black
- Extended Bold
- Extended Regular
- Extended Light
- Extended ExtraLight
- Extended Thin
Axes
wdth
150
wght
650
XHGT
0
-
wdth50150
-
wght100900
-
XHGT0100
Size
100
-
16150
CSS
CSS Copied
IvyMode Variable
by
The Ivy Foundry
No, The Real Pants.
Instance
Custom
- Bold
- SemiBold
- Regular
- Light
- Thin
- Bold Italic
- SemiBold Italic
- Italic
- Light Italic
- Thin Italic
Axes
wght
700
ital
0
-
wght200700
-
ital01
Size
68
-
16150
CSS
CSS Copied
Normalidad Variable
by
CSTM
525,600 минут
Instance
Custom
- Compact Black
- Compact Bold
- Compact Medium
- Compact Regular
- Compact Light
- Compact Thin
- Text Black
- Text Bold
- Text Medium
- Text Regular
- Text Light
- Text Thin
- Wide Black
- Wide Bold
- Wide Medium
- Wide Regular
- Wide Light
- Wide Thin
- Extended Black
- Extended Bold
- Extended Medium
- Extended Regular
- Extended Light
- Extended Thin
- Ultra Extended Black
- Ultra Extended Bold
- Ultra Extended Medium
- Ultra Extended Regular
- Ultra Extended Light
- Ultra Extended Thin
Axes
wght
900
wdth
150
-
wght100900
-
wdth90150
Size
72
-
16150
CSS
CSS Copied
Zeitung Variable
by
Underware
$ One Billion!
Instance
Custom
- Black Micro
- Extrabold Micro
- Bold Micro
- Semibold Micro
- Regular Micro
- Light Micro
- Extralight Micro
- Thin Micro
- Black
- Extrabold
- Bold
- Semibold
- Regular
- Light
- Extralight
- Thin
Axes
wght
900
opsz
20
-
wght100900
-
opsz820
Size
100
-
16150
CSS
CSS Copied
Logical Variable
by
Bold Monday
Agenda: ☕💭🗪📺
Instance
Custom
- Black
- Heavy
- Bold
- Medium
- Book
- Regular
- Light
- Thin
Axes
wght
600
-
wght200900
Size
90
-
16150
CSS
CSS Copied
Apotek Variable
by
Kerns & Cairns
SOMEDAY
Instance
Custom
- Compressed Black
- Compressed Bold
- Compressed Semibold
- Compressed Medium
- Compressed Regular
- Compressed Light
- Compressed ExtraLight
- ExtraCondensed Black
- ExtraCondensed Bold
- ExtraCondensed Semibold
- ExtraCondensed Medium
- ExtraCondensed Regular
- ExtraCondensed Light
- ExtraCondensed ExtraLight
- Condensed Black
- Condensed Bold
- Condensed Semibold
- Condensed Medium
- Condensed Regular
- Condensed Light
- Condensed ExtraLight
- Black
- Bold
- Semibold
- Medium
- Regular
- Light
- ExtraLight
- Wide Black
- Wide Bold
- Wide Semibold
- Wide Medium
- Wide Regular
- Wide Light
- Wide ExtraLight
- ExtraWide Black
- ExtraWide Bold
- ExtraWide Semibold
- ExtraWide Medium
- ExtraWide Regular
- ExtraWide Light
- ExtraWide ExtraLight
- Extended Black
- Extended Bold
- Extended Semibold
- Extended Medium
- Extended Regular
- Extended Light
- Extended ExtraLight
Axes
wdth
200
wght
700
-
wdth50200
-
wght200900
Size
120
-
16150
CSS
CSS Copied
Louvette Variable It
by
CJ Type
Curl up with a book
Instance
Custom
- Text Ultra Italic
- Text Black Italic
- Text Bold Italic
- Text Semi Bold Italic
- Text Italic
- Deck Ultra Italic
- Deck Black Italic
- Deck Bold Italic
- Deck Semi Bold Italic
- Deck Italic
- Display Ultra Italic
- Display Black Italic
- Display Bold Italic
- Display Semi Bold Italic
- Display Italic
- Banner Ultra Italic
- Banner Black Italic
- Banner Bold Italic
- Banner Semi Bold Italic
- Banner Italic
Axes
wght
400
opsz
100
-
wght4001000
-
opsz14100
Size
100
-
16150
CSS
CSS Copied
Learn more about
Variable Fonts
Introducing OpenType Variable Fonts
an informative point of entry by designer John Hudson
OpenType Font Variations Overview
Microsoft’s technical documentation about this new font technology
Variations on a theme
Type Network’s introduction to a series looking at different aspects of working with variable fonts
Thinking beyond the static
Bas Jacobs of Underware speaks with us about how the dynamic possibilities of variable fonts
Putting accessibility first
How the web’s most accessible and flexible collection of government websites was produced using variable fonts
Finesse and express
Font Bureau is developing variable fonts for Google that enable precision typography in dynamic environments
Using all the axes
A conversation with Typetura about enabling easy variable font usage online
Using variable fonts on the web
Turning our attention to action: How to use variable fonts in your web designs
An axis for realness
XYZ Type created a branded variable font with a unique axis to emphasize a client’s unique voice
Branding with variable fonts
A look at recent identity projects that are embracing the flexibility of variable fonts
Revitalizing Canal Brasil with a custom variable font
Plau creates a typeface that speaks to all with an array of voices.
VF in AR and VR: More than acronyms
Typographic experiments that may help us adapt to our changing digital landscape