Typography is the technique of arranging type to make words readable and visually pleasing. To adjust the Typography of any element, go to Style Panel > Typography.
Here, you can change the Font, Font Size, Alignment, and more. So let’s go over each feature one by one.
Font: Choose the font style from the drop-down list to define the visual identity of your text.
Font Size: Adjust the font size to enhance readability and balance within your design.
Font Weight: Select the font-weight or “boldness” of your text. Keep in mind that the weight will depend on the font style selected.
Below is a table that lists all of the Font Weight options that are available and their values. You can refer to this to select the one you prefer.
Font Weight | Value |
Thin | 100 |
Extra Light | 200 |
Light | 300 |
Regular | 400 |
Medium | 500 |
Semi Bold | 600 |
Bold | 700 |
Extra Bold | 800 |
Black | 900 |
Line Height: Set the line height to determine the spacing between lines of text, contributing to improved readability.
Letter Spacing: Control the horizontal spacing between each letter, optimizing legibility and aesthetic appeal.
Color: Choose the foreground color of your text and text decorations, ensuring cohesive and visually pleasing designs. Learn more on Color Settings.
Text Alignment: Specify text alignment for optimal presentation. Options include left, center, and right alignment.
Following the settings mentioned above is a button called Advance Font Editor. Clicking on this should give you access to more advanced text formatting options.
Alignment: In addition to the standard left, center, and right alignments, the Advanced Font Editor offers the Justify option. This aligns both edges of each line of text with both margins, enhancing visual consistency.
Decoration: Emphasize text using decorations. Options include:
Outline your typography using this option.
Width: Define the Stroke's width.
Color: Set the Stroke's color.
Opacity: Set the Stroke color's opacity.
This feature allows you to define the Font Size as a number between an upper and lower bound. It requires the three following parameters. It ensures that the font size remains within a specific range, providing flexibility and responsiveness in your design.
Set a container width value to constrain horizontal text span. This introduces line breaks after reaching the specified limit, enhancing readability.
Define where the line breaks appear when the text overflows its content box.
Define text behavior when it overflows its container:
Control text-indent for space before the text:
Set text orientation for vertical writing mode:
Enable vertical mode for your block of text from here. Options include Unset, RTL, and LTR.
Utilize OpenType font features to enhance character styles:
Case: Select the Letter Case you want your text to be. Options include the following:
Case-Sensitive Forms: Enable this to allow certain characters to be shifted to better suit the case defined.
Capital Spacing: Enable this to allow spacing adjustments for capital letters.
Styles: Define numeral styles, options include:
Position: Use Position to define subscript and superscript.
Fractions: Enable this to allow fractional glyphs to appear in your text.
Control the use of Ligatures in your text block.
Stylistic Sets make the use of a font’s alternate glyphs so much easier and remove the need to manually replace each occurrence of a character with the desired alternate.
Fine-tune letter spacing using kerning data for balanced typography.
The following features are related to Fractions. With these enabled, you can use special fractional glyphs contained in an OpenType font.
Working with typography involves various types of units for length, color, and more. To understand these units, refer to our Values and Units documentation.
Was this page helpful?
Our website uses cookies to improve your browsing experience on our website. By continuing to use this website, you agree to their use. For details, please check our Privacy Policy.
Experience Droip in Action – Explore a live-built page and see the power of our builder in action.
Explore Live