139
edits
Changes
initial draft
= What are variable fonts =
''MDN Web Docs'' define variable fonts as:
<blockquote>
<p>“Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style.”<ref>https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide</ref></p>
</blockquote>
= Getting information about the variable font =
It is better to start playing with a variable font (such as [https://www.recursive.design/ Recursive], which you can download for free at [https://github.com/arrowtype/recursive/releases/latest/ GitHub]<ref>Variable fonts are in the directory <code>ArrowType-Recursive-1.085/Recursive_Desktop/</code>, being the font named <code>Recursive_VF_1.085.ttf</code>. It is easier to rename it just to <code>Recursive.ttf</code>.</ref>).
Once you put them in a place where ConTeXt can find them, just execute:
<texcode>
\usemodule[fonts-variable]
\starttext
\showfontvariations[font=file:recursive.ttf]
\stoptext
</texcode>
This will generate a PDF document with information about parameters, OpenType features (grouped by type) and axes (design axes cannot be accessed by the user). Instances are also provided with values for each used axis.
You may have either the variable font and the font styles, but there is no gain in having both font styles (or instances [individual font files]) and the variable font. And there is room for font name clashes (when variable fonts aren’t named differently than their instances).
The axis information displays a table with: tag, name, minimum, default and maximum values (''Recursive'' has the following axes, tagged as <code>mono</code>, <code>casl</code>, <code>wght</code>, <code>slnt</code> and <code>crsv</code>).
= Using the variable axes =
Access to the variable font configuration is achieved through a font feature (using the <code>axis</code> key), such as in:
<texcode>
\definefontfeature[myaxisa][axis={wght=500, mono=1}]
\definefontfeature[myaxisb][axis={wght=500, mono=1, casl=1}]
\definefontfeature[myaxisd][axis={wght=500, mono=1, casl=1, crsv=1}]
\definefontfeature[myaxise][axis={wght=500, mono=1, casl=1, crsv=1, slnt=-15}]
\definefontfamily[mainface][rm][Recursive]
[features={default, myaxisa}]
\definefontfamily[mainfaceb][rm][Recursive]
[features={default, myaxisb}]
\definefontfamily[mainfaced][rm][Recursive]
[features={default, myaxisd}]
\definefontfamily[mainfacee][rm][Recursive]
[features={default, myaxise}]
\setupbodyfont[mainface]
\starttext
\scale[width=\textwidth]
{\tf Regular \it Italic}
\scale[width=\textwidth]
{\mainfaceb\tf Regular \it Italic}
\scale[width=\textwidth]
{\mainfaced\tf Regular \it Italic}
\scale[width=\textwidth]
{\mainfacee\tf Regular \it Italic}
\stoptext
</texcode>
This font feature requires a new font instance (it cannot be added with {{cmd|feature}}).
== Notes ==
''MDN Web Docs'' define variable fonts as:
<blockquote>
<p>“Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style.”<ref>https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide</ref></p>
</blockquote>
= Getting information about the variable font =
It is better to start playing with a variable font (such as [https://www.recursive.design/ Recursive], which you can download for free at [https://github.com/arrowtype/recursive/releases/latest/ GitHub]<ref>Variable fonts are in the directory <code>ArrowType-Recursive-1.085/Recursive_Desktop/</code>, being the font named <code>Recursive_VF_1.085.ttf</code>. It is easier to rename it just to <code>Recursive.ttf</code>.</ref>).
Once you put them in a place where ConTeXt can find them, just execute:
<texcode>
\usemodule[fonts-variable]
\starttext
\showfontvariations[font=file:recursive.ttf]
\stoptext
</texcode>
This will generate a PDF document with information about parameters, OpenType features (grouped by type) and axes (design axes cannot be accessed by the user). Instances are also provided with values for each used axis.
You may have either the variable font and the font styles, but there is no gain in having both font styles (or instances [individual font files]) and the variable font. And there is room for font name clashes (when variable fonts aren’t named differently than their instances).
The axis information displays a table with: tag, name, minimum, default and maximum values (''Recursive'' has the following axes, tagged as <code>mono</code>, <code>casl</code>, <code>wght</code>, <code>slnt</code> and <code>crsv</code>).
= Using the variable axes =
Access to the variable font configuration is achieved through a font feature (using the <code>axis</code> key), such as in:
<texcode>
\definefontfeature[myaxisa][axis={wght=500, mono=1}]
\definefontfeature[myaxisb][axis={wght=500, mono=1, casl=1}]
\definefontfeature[myaxisd][axis={wght=500, mono=1, casl=1, crsv=1}]
\definefontfeature[myaxise][axis={wght=500, mono=1, casl=1, crsv=1, slnt=-15}]
\definefontfamily[mainface][rm][Recursive]
[features={default, myaxisa}]
\definefontfamily[mainfaceb][rm][Recursive]
[features={default, myaxisb}]
\definefontfamily[mainfaced][rm][Recursive]
[features={default, myaxisd}]
\definefontfamily[mainfacee][rm][Recursive]
[features={default, myaxise}]
\setupbodyfont[mainface]
\starttext
\scale[width=\textwidth]
{\tf Regular \it Italic}
\scale[width=\textwidth]
{\mainfaceb\tf Regular \it Italic}
\scale[width=\textwidth]
{\mainfaced\tf Regular \it Italic}
\scale[width=\textwidth]
{\mainfacee\tf Regular \it Italic}
\stoptext
</texcode>
This font feature requires a new font instance (it cannot be added with {{cmd|feature}}).
== Notes ==