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