Most variable fonts are based on the idea of multiple master fonts and the calculation of intermediate stages. Here, you can interpolate or even extrapolate between two points. For example, you draw a light and a bold cut (or a tight and a wide cut) and interpolate between these master cuts to obtain all imaginable intermediate levels.
The file size of a single variable font is much smaller than an entire font family and thus improves loading times and thus the performance of a website.
On the downside, the user has more options — and therefore more opportunities to do something wrong. For people with little experience working with writing, this can be overwhelming.
More information about variable fonts:
abctypo.de/monotype-vf
abctypo.de/microsoft-vf
More typography tips and basics can be found in the book”The ABC of typography”.