Typography
Typography (text formatting and styling) is important to make the text content legible and readable on a website. This is achieved by creating a hierarchical structure of the text and its formatting or styling.
By default, the Text element has a div tag. To create text structure, you can assign h1, h2,… h6 heading tags to text elements, depending on their position in the hierarchy. The h1 tag is used to create the first level heading, while h6 is the last heading in the hierarchy. This can be done on the Settings tab in the right panel.
Text elements can be either independent site elements containing blocks of content, or they can be a part of more complex elements, such as buttons and widgets (lists, menus). In all cases, you can format text by applying the desired styles to it.
To format text you need to:
- select an element on the Canvas or the Layers tab in the left panel
To select a text element inside the widget, it is convenient to use deep selection by pressing Ctrl + clicking on the Canvas (selection of the lowest element in the hierarchy, on which the cursor is hovered).
- set the styles on the Styles tab in the right panel in the Text section
Font
To set a font, open the list and select the desired one (Google fonts are used).
Font weight
Depending on the selected font, this list will contain options for its weight and style (italic).
Font size
Font size can be set in various units, such as px, em, %, vw, or vh. It can be fixed or change proportionally to the parent element or the browser window. The default font size is set in pixels.
Font color
You can set the text color by entering a color value (in Hex or RGB format) or by picking a color with the color picker. You can also adjust the opacity of the text color from 0 to 100%.
You can save colors to be used later in the project. To do this, click on “+” in Saved Colors.
You can also select a color from the recently used ones by clicking on the dropdown list and selecting Last Used Colors.
Line-height
The spacing between lines of text is set to Normal by default and depends on the browser. You can adjust the spacing between lines by selecting a value in px, em, %, vw, vh, or num (a numeric value depending on the browser’s font size, typically 16px = 1num).
Letter-spacing
Letter spacing is set to Normal by default and depends on the selected font. You can change the letter spacing by selecting a value in px, em, vw, or vh.
Text Align
You can align text:
- width by choosing alignment to the left, center or right
- height by selecting alignment on the top edge, in the middle or on the bottom edge
Text Stroke
You can set the stroke weight in pixels, its color, and opacity for the color.
Text Shadows
You can add a shadow to the text by clicking on “+”. You can add multiple shadows with different properties and change their order, as well as hide and delete them.
You can set the offset along the x and y axes, blur, color, and opacity for the shadow in the shadow properties.
Pixels (px)
Pixel is a base unit.
Em
The font size is relative to the parent element’s font size. 1em is equal to the element’s current font size. The value of the property can be less than 1, then the element's font size will be less than the parent one, or more than 1, then the element’s font size will be larger than the parent one.
Example: Parent element’s font size is 16px:
- child element’s font size is 0.5em = 8px
- child element’s font size is 2em= 32px
The child element’s font size will change in proportion to changes in the parent element’s font size.
Percentage (%)
The size is defined in percentage of the parent element’s font size. The child element’s font size will change in proportion to changes in the parent element’s font size.
Viewport Width (vw)
A percentage of the total width of the browser window. 10vw represents 10% of the browser window’s current width (e.g. 48px on a mobile phone with a 480px screen).
Viewport Height (vh)
A percentage of the total height of the browser window. 10vh is 10% of the browser window’s current height.
By clicking on the icon with three dots in the text options, you can set additional properties.
The following extra properties are available:
Decoration
Text can be highlighted with underlining or strikethrough.
Capitalize
All letters of the text can be converted to uppercase, lower case, or each word can be capitalized.
Overflow Wrap
Text is wrapped word by word when a block overflows. The function is enabled by default.
Breaking
Breaking property controls how white-space is handled inside an element.
- Normal - Text in the browser window is displayed as usual, line breaks are set automatically. This is a default value.
- Nowrap - Spaces are ignored, all text is displayed on one line.
- Pre - Text is shown with all spaces and breaks as they were added. If the line is too long to fit in the browser window, a horizontal scroll bar will be added.
- Pre-wrap - All spaces and breaks are preserved in the text but if the width of the line does not fit in the specified area, the text will be automatically wrapped to the next line.
- Pre-line - Spaces are ignored in the text, the text is automatically wrapped to the next line if it does not fit in the specified area.
- Break-spaces – The same as pre-wrap, except that any sequence of permanent spaces always takes space, including at the end of a line. The line can be broken after each permanent space, including between spaces.
You can style not only the entire text element, but also a part of the text by selecting it with the mouse. With the text selected in the Text block, you will see the Inline Text option in the right panel for styling it. Here, in addition to the above properties, you can set Diacritics, that is superscript or subscript.
You can also make the selected part of the text to be a link to a website page or an external resource by specifying a link in the Insert link field.