# FontVariation

Artifact: [androidx.compose.ui:ui-text](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/text/font/FontVariation.kt+class:androidx.compose.ui.text.font.FontVariation) Added in [1.3.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.3.0) Common/AllAndroid/JVM
- Cmn

  ```
  object FontVariation
  ```

*** ** * ** ***

Set font variation settings.

To learn more about the font variation settings, see the list supported by [fonts.google.com](https://fonts.google.com/variablefonts#axis-definitions).

## Summary

| ### Nested types |
|---|
| `sealed interface https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation.Setting` Represents a single point in a variation, such as 0.7 or 100 |
| `class https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation.Settings` A collection of settings to apply to a single font. |

| ### Public functions |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation.Setting` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation#Setting(kotlin.String,kotlin.Float)(name: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` Create a font variation setting for any axis supported by a font. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation.Settings` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation#Settings(androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontStyle,kotlin.Array)( weight: https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontWeight, style: https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontStyle, vararg settings: https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation.Setting )` Variation settings to configure a font with `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontWeight` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontStyle` | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation.Setting` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation#grade(kotlin.Int)(value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html)` Change visual weight of text without text reflow. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation.Setting` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation#italic(kotlin.Float)(value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` Italic or upright, equivalent to `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontStyle` | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation.Setting` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation#opticalSizing(androidx.compose.ui.unit.TextUnit)(textSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit)` Optical size is how "big" a font appears to the eye. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation.Setting` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation#slant(kotlin.Float)(value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` Adjust the style from upright to slanted, also known to typographers as an 'oblique' style. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation.Setting` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation#weight(kotlin.Int)(value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html)` Weight, equivalent to `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontWeight` | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation.Setting` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation#width(kotlin.Float)(value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` Width of the type. | Cmn |

| ### Public properties |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation.Settings` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation#Empty()` An empty `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation.Settings` instance. | Cmn |

## Public functions

### Setting

Cmn Added in [1.3.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.3.0)

```
fun Setting(name: String, value: Float): FontVariation.Setting
```

Create a font variation setting for any axis supported by a font.

```kotlin
val setting = FontVariation.Setting('wght', 400f);
```

You should typically not use this in app-code directly, instead define a method for each setting supported by your app/font.

If you had a setting `fzzt` that set a variation setting called fizzable between 1 and 11, define a function like this:

```kotlin
fun FontVariation.fizzable(fiz: Int): FontVariation.Setting {
   require(fiz in 1..11) { "'fzzt' must be in 1..11" }
   return Setting("fzzt", fiz.toFloat())
```

| Parameters |
|---|---|
| `name: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html` | axis name, must be 4 characters |
| `value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | value for axis, not validated and directly passed to font |

### Settings

Cmn Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.10.0)

```
fun Settings(
    weight: FontWeight,
    style: FontStyle,
    vararg settings: FontVariation.Setting
): FontVariation.Settings
```

Variation settings to configure a font with `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontWeight` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontStyle`

| Parameters |
|---|---|
| `weight: https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontWeight` | to set 'wght' with `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation#Settings(androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontStyle,kotlin.Array)`\\(`https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontWeight#weight()`) |
| `style: https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontStyle` | to set 'ital' with `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation#italic(kotlin.Float)`\\(`https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontStyle#value()`) |
| `vararg settings: https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation.Setting` | other settings to apply, must not contain 'wght' or 'ital' |

| Returns |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation.Settings` | settings that configure `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontWeight` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontStyle` on a font that supports 'wght' and 'ital' |

### grade

Cmn Added in [1.3.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.3.0)

```
fun grade(value: Int): FontVariation.Setting
```

Change visual weight of text without text reflow.

Finesse the style from lighter to bolder in typographic color, without any changes overall width, line breaks or page layout. Negative grade makes the style lighter, while positive grade makes it bolder. The units are the same as in the Weight axis.

Visual appearance of text with weight and grade set is similar to text with

```kotlin
weight = (weight + grade)
```

| Parameters |
|---|---|
| `value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | grade, in -1000..1000 |

### italic

Cmn Added in [1.3.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.3.0)

```
fun italic(value: Float): FontVariation.Setting
```

Italic or upright, equivalent to `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontStyle`

'ital', 0.0f is upright, and 1.0f is italic.

A platform *may* provide automatic setting of `ital` on font load. When supported, `ital` is automatically applied based on `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontStyle` if platform and the loaded font support 'ital'.

Automatic mapping is done via `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation.Settings`\\(`https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontWeight`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontStyle`\\)

To override this behavior provide an explicit FontVariation.italic to a `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/Font` that supports variation settings.

| Parameters |
|---|---|
| `value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | 0.0f, 1.0f |

### opticalSizing

Cmn Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.10.0)

```
fun opticalSizing(textSize: TextUnit): FontVariation.Setting
```

Optical size is how "big" a font appears to the eye.

It should be set by a ratio from a font size.

Adapt the style to specific text sizes. At smaller sizes, letters typically become optimized for more legibility. At larger sizes, optimized for headlines, with more extreme weights and widths.

A Platform *may* choose to support automatic optical sizing. When present, this will set the optical size based on the font size.

To override this behavior provide an explicit FontVariation.opticalSizing to a `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/Font` that supports variation settings.

| Parameters |
|---|---|
| `textSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit` | font-size at the expected display, must be in sp |

### slant

Cmn Added in [1.3.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.3.0)

```
fun slant(value: Float): FontVariation.Setting
```

Adjust the style from upright to slanted, also known to typographers as an 'oblique' style.

Rarely, slant can work in the other direction, called a 'backslanted' or 'reverse oblique' style.

'slnt', values as an angle, 0f is upright.

| Parameters |
|---|---|
| `value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | -90f to 90f, represents an angle |

### weight

Cmn Added in [1.3.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.3.0)

```
fun weight(value: Int): FontVariation.Setting
```

Weight, equivalent to `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontWeight`

Setting weight always causes visual text reflow, to make text "bolder" or "thinner" without reflow see `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation#grade(kotlin.Int)`

Adjust the style from lighter to bolder in typographic color, by varying stroke weights, spacing and kerning, and other aspects of the type. This typically changes overall width, and so may be used in conjunction with Width and Grade axes.

This is equivalent to `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontWeight`, and platforms *may* support automatically setting 'wghts' from `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontWeight` during font load.

Setting this does not change `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontWeight`. If an explicit value and `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontWeight` disagree, the weight specified by `wght` will be shown if the font supports it.

Automatic mapping is done via `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation.Settings`\\(`https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontWeight`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontStyle`\\)

| Parameters |
|---|---|
| `value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | weight, in 1..1000 |

### width

Cmn Added in [1.3.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.3.0)

```
fun width(value: Float): FontVariation.Setting
```

Width of the type.

Adjust the style from narrower to wider, by varying the proportions of counters, strokes, spacing and kerning, and other aspects of the type. This typically changes the typographic color in a subtle way, and so may be used in conjunction with Width and Grade axes.

'wdth', such as 10f

| Parameters |
|---|---|
| `value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | > 0.0f represents the width |

## Public properties

### Empty

Cmn Added in [1.13.0-rc01](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.13.0-rc01)

```
val Empty: FontVariation.Settings
```

An empty `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation.Settings` instance.