Variable Font Example for Swift

by iOS Example

Variable Fonts

What are variable fonts?

A variable font is an OpenType font format that includes new technology called OpenType Format Variantions.

Axes

In variable fonts, “axis” usually refers to a single aspect of a typeface’s design that can be altered by the user. Common axes include Italic, Optical Size, Slant, Weight, and Width, all five of which are registered (defined) in the OpenType file format specification.

User Axes

The most common user axes are the staples of typography: Weight, Width, Italic, Slant, Grade, and Optical Size.

The only one of these six that Roboto Flex doesn’t contain is Italic—and that’s because it has an equivalent Slant axis, so it isn’t necessary.

  • Weight Weight is the overall thickness of a typeface’s stroke in any given font.

  • Width Width is the result of how much horizontal space is taken up by a typeface’s characters.

  • Optical Size “Optical Size” (controlled with font-optical-sizing or font-variation-setting: ‘opsz’ VALUE in CSS) is an axis found in some variable fonts.

  • Slant Slant (slnt in CSS) is an axis found in some variable fonts.

  • Grade “Grade” (GRAD in CSS) is an axis found in some variable fonts that can be used to alter stroke thicknesses (or other forms) without affecting the type’s overall width, inter-letter spacing, or kerning—unlike altering weight.

  • Xtra “Parametric Counter Width” (XTRA in CSS) is a parametric axis, found in some variable fonts, that varies counter widths in the X dimension.

  • Xopq “Parametric Thick Stroke” (XOPQ in CSS) is a parametric axis, found in some variable fonts, for specifying and varying thick stroke weights, such as stems.

  • Yopq “Parametric Thin Stroke” (YOPQ in CSS) is a parametric axis, found in some variable fonts, for specifying and varying thin stroke weights, such as bars and hairlines.

  • Ytlc “Parametric Lowercase Height” (YTLC in CSS) is a parametric axis, found in some variable fonts, for specifying and varying the height of counters and other spaces between the baseline and x-height.

  • Ytuc “Parametric Uppercase Counter Height” (YTUC in CSS) is a parametric axis, found in some variable fonts, for specifying and varying the height of uppercase letterforms.

  • Ytas “Parametric Ascender Height” (YTAS in CSS) is a parametric axis, found in some variable fonts, for specifying and varying the height of lowercase ascenders.

  • Ytfi “Parametric Figure Height” (YTFI in CSS) is a parametric axis, found in some variable fonts, for specifying and varying the height of figures by varying their counterforms.

Roboto-Flex Font

❗️ You can download google font! (Roboto-Flex).

In this project, I use Roboto-Flex font. This font has a lot of axis. We need to work with axes id’s.

Axis Id’s

public enum FontVariations: Int, CustomStringConvertible {
    case weight = 2003265652
    case width = 2003072104
    case opticalSize = 1869640570
    case grad = 1196572996
    case slant = 1936486004
    case xtra = 1481921089
    case xopq = 1481592913
    case yopq = 1498370129
    case ytlc = 1498696771
    case ytuc = 1498699075
    case ytas = 1498693971
    case ytde = 1498694725
    case ytfi = 1498695241 
}

Usage

First, you need to add the custom variable font to your project.

Text("Variable Fonts Example Text")
                .font(.variableFont( 24.0,
                                     axes: [FontVariations.weight.rawValue:400]))

NOTE:

You can try with other font sample. You need to add your new font and change name for this line :

UIFontDescriptor(fontAttributes: [.name: “Roboto Flex”, kCTFontVariationAttribute as UIFontDescriptor.AttributeName: axes])

GitHub

View Github