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.


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' },
      }
    }
  }
});