Skip to main content
Language:

Customize the font system

In this example, we will show you how to configure font-size, letter-spacing, and text-transform of certain UI elements.

The font customization is part of the custom object and needs to be changed under custom.measurements.fontSystem.

headline1#

This will change the values for the title of the ToolControlBar.

size#

Defines the font-size in pixel.

letterSpacing#

Defines the letter-spacing as a relative value.

case#

Defines the text-transform value.

headline2#

This will change the values for the DialogTitle and CategoryLabel of the ToolControlBar.

body#

This will change the values for the TextInput, DropdownText, Carousel, and ModalBody.

label#

This will change the values for the CardLabel, InputLabel, and Tooltip.

button1#

This will change the values for the button base styling which affects the ContainedPrimaryButton, OutlinedPrimaryButton, OutlinedSecondaryButton, TextPrimaryButton, TextSecondaryButton.

button2#

This will change the values for CanvasBarTextSecondaryButton, DropdownItem and SpriteActionButton.

basicUICardLabel#

This will change the values for the CardLabel of the BasicUI.

basicUITabLabel#

This will change the values for the TabLabel of the BasicUI.

File:
PhotoEditorSDK.PhotoEditorSDKUI.init({
custom: {
measurements: {
fontSystem: {
headline1: {
size: 16,
letterSpacing: 1.5,
case: 'uppercase'
},
headline2: { size: 14, letterSpacing: 0.8, case: 'uppercase' },
body: { size: 13, letterSpacing: 0, case: 'none' },
label: { size: 13, letterSpacing: 0, case: 'capitalize' },
button1: { size: 12, letterSpacing: 1.2, case: 'uppercase' },
button2: { size: 14, letterSpacing: 0, case: 'capitalize' },
basicUICardLabel: { size: 12, letterSpacing: 0, case: 'capitalize' },
basicUITabLabel: { size: 14, letterSpacing: 0.8, case: 'uppercase' },
}
}
}
});