Typography plays a pivotal role in website building, acting as a bridge between design aesthetics and user readability. Typography ensures that content is not only visually pleasing but also clear and legible.
To start editing the typography of your website elements, open the Style tab of the widget and click on the edit icon located in front of Typography.
Family
Family refers to the kind of Typeface or the type of design of a font. For example, Times New Roman is a font family type.
To choose a font family:
- Click on the drop-down menu in front of Family
- Choose the font type you want to use
Size
The size refers to the size of your font. You can set the Font Size using any of the measurement types by clicking the measurement type on top of the number field. By default, the measurement type is set to pixels.
To customize the size:
- Move the dot on the slider to either side or
- Enter a number value in the number field
Weight
This setting changes the thickness of the letters. To customize the Weight of your font, click on the drop-down arrow in front of Weight and choose from any of the options.
Transform
The Transform function enables the conversion between lower case to upper case and vice versa, or to capitalize the first letters of sentences. To use the Transform function, click on the drop-down menu and choose from the list.
Style
Allows the option of enabling or disabling italics. This includes the possibility for oblique text, a variant of italics suited for specific fonts. Use the drop-down menu to choose from the options.
Decoration
Option to underline, overline, or line through the text.
Line height
Use this option to adjust the spacing between your sentences. You can set the spacing in pixels, EM or REM. Use the bar to adjust the height or enter a numeric value in the number field.
Letter spacing
When your text alignment seems off, tweak the distance between characters using Letter Spacing. This is quantifiable in pixels, EM. Use the bar to adjust the spacing or set a numeric value in the number field.
Word spacing
Word spacing is usually used for fine-tuning the page layouts. This too is measured in either pixels, EM or REM. Use the bar to adjust the spacing or enter a numeric value in the number field.
Note:
You can adjust the size, line height, letter spacing and word spacing for different devices by clicking the device icon located in front of them.