Skip to content

Letter Spacing

Letter spacing, also known as tracking, refers to the amount of space between each character in a word. It can be adjusted to create a specific look or improve the readability of the text. The letter spacing can be increased or decreased depending on the desired effect.

Preview of the OxyProps font letter spacing.

OxyProps includes a range of CSS variables and utility classes for controlling letter spacing. The available CSS variables and utility classes range from -0.5em to 1em, with the values increasing. For example, the o-tracking-1 class adds a letter spacing of 0.025em to the text, while the o-tracking-7 class adds a letter spacing of 1em.

To use these props and classes, simply add them to the HTML element containing the text that you want to modify.

Default valueCSS VariableUtility Class
-0.05 em --o-font-letterspacing-0 o-tracking-0
0.025 em --o-font-letterspacing-1 o-tracking-1
0.05 em --o-font-letterspacing-2 o-tracking-2
0.075 em --o-font-letterspacing-3 o-tracking-3
0.15 em --o-font-letterspacing-4 o-tracking-4
0.5 em --o-font-letterspacing-5 o-tracking-5
0.75 em --o-font-letterspacing-6 o-tracking-6
1 em --o-font-letterspacing-7 o-tracking-7

Context Menu

link Context Menu

Oxyprops creates a context menu for Oxygen Letter Spacing input fields to give you instant access to the corresponding CSS varaibles.
Simply right-click on the input field and select the desired value from the context menu.

Preview of the OxyProps font letter spacing.

Experiment with different letter spacing values to find the look that works best for your design. Remember that too much letter spacing can make the text difficult to read, while too little can make it look cramped and hard to read as well.