Text properties
You can change the appearance and position of text by modifying its properties, including its style, alignment, size, etc.
View text properties
Text properties can be found in the Text modal in the design panel on the right sidebar.
- 1.Click
to view, create, and apply text styles. - 2.Click
to browse the list of web and local fonts to find the font you need. - 3.Click
to adjust font weight or style. - 4.Click
to adjust font size. - 5.Adjust the vertical distance between lines of text using the line height.
- 6.Adjust the horizontal distance between characters with letter spacing.
- 7.Adjust the vertical distance between paragraphs with paragraph spacing.
- 8.Select the text type between
to control how the text content responds when adjusting the text layer size. - 9.Adjust the horizontal alignment of text within the text box.
- 10.Adjust the vertical alignment of text within the text box.
- 11.Click
to open the Type settings panel and explore more text properties.
Type settings panel
Through the Type settings panel, you can access additional text properties.
You can click 
in the lower right corner of the Text modal to open the Type settings panel.
- Resizing: Set how the text content responds when adjusting the text layer size.
- Alignment: Adjust the horizontal alignment of the text.
- Decoration: Apply decorations to the text, such as strikethrough and underline.
- List style: Apply bulleted list or numbered list to the text.
- Case: Adjust the letter case. Choose from uppercase, lowercase, and title case.
- Truncate text: Set whether to hide overflow content.
Basic properties
Font family
A typeface is a collection of glyphs with similar design features.
A font family is a collection of styles that make up a typeface. For example, an Inter font family includes styles like regular, bold, light, etc.
Motiff will use Inter as the default font for new text layers. You can switch to other font families using the font picker or select the style of the chosen font from the dropdown menu at the style location.
Font weight
A font can have many styles or weights. Every font family has its own style options. For example, font weights in the Inter font family include Light, Normal, Regular, Medium, Bold, Heavy, etc.
After selecting a font family, you can adjust the font weight by adjusting the property below the font family.
-
Click
to browse all styles of the selected font. -
Use shortcut keys to increase or decrease font weight.
- macOS: ⌥ Option + ⌘ Command + < (Thinner) or > (Bolder)
- Windows: Ctrl + Alt + < (Thinner) or > (Bolder)
Font size
Font size controls the text size. Motiff represents font size in pixels.
There are several ways to adjust the font size:
- Click the dropdown menu to select a default font size.
- Enter the font size in the input box.
- Use shortcut keys:
- macOS: ⇧ Shift + ⌘ Command + < (Smaller) or > (Larger).
- Windows: Ctrl + Shift + < (Smaller) or > (Larger)
Tip: Motiff represents font size in several different ways.
If you want to convert the design to code, your screen resolution will determine the actual size of any text. You can view the CSS pixel value (px) of any text in the right sidebar in Dev Mode.
If you want to export the design as a PDF, Motiff will render the font size using traditional print points (pt).
Line height
Line height allows you to control the vertical distance between lines of text in a paragraph. It can help to improve the readability of the text. Smaller line heights make the text difficult to read, while larger line heights make the text look messy and disjointed.
You can use this field to adjust the vertical spacing between lines of text, or use shortcut keys:
- macOS: ⇧ Shift + ⌥ Option + < (Smaller) or > (Larger)
- Windows: Ctrl + Shift + < (Smaller) or > (Larger)
Motiff allows you to set a fixed line height in pixels (px) or a line height as a percentage of the font size (%).
Tip: The default line height for text in Motiff is automatic (Auto). You can switch between fixed and percentage line height and Motiff will convert the value to the nearest pixel.
Letter spacing
Letter spacing lets you define the space between characters, which determines how easy your text is to read.
Use this field to adjust the letter spacing of the selected content, or use shortcut keys:
- macOS: ⌥ Option + < (Smaller) or > (Larger)
- Windows: Ctrl + < (Smaller) or > (Larger)
Resizing
The Resizing property controls how the text layer changes when adjusting the text layer size. You can choose from the following three types:
- Auto width: With auto width, the width of the text layer increases with the addition of text content.
- Auto height: With auto height, the height of the text layer increases with the addition of text content.
- Fixed size: With fixed size, the width and height of the text layer remain unchanged regardless of the layer’s contents.
Note: When you click and drag to create on the canvas, Motiff will set the text layer to Fixed size.
Alignment
Horizontal alignment
The alignment determines how text is displayed within its bounding box. The horizontal alignment defines how the text is aligned along the x-axis.
Left-aligned text is commonly used for paragraph text. Center-aligned text is usually used for shorter lines of text.
Left
Center
Right
Justified
Tip: Justified aligns the first character of each line of text to the left-most edge and the last character to the right-most edge. Motiff will evenly space every word and every character in a line of text that is justified at both ends.
Vertical alignment
The alignment determines how text is displayed within its bounding box. Vertical alignment defines how the text is aligned along the y-axis.
Top
Middle
Bottom
Tip: Vertical alignment only affects text layers with Fixed size. Layers set to Auto width or Auto height will ignore alignment settings.
Text decoration
You can apply text decoration to an entire text layer or selected text. You have two types of decoration available:
Strikethrough
Underline
Strikethrough
Strikethrough adds a horizontal line through the center of your text.
You can use strikethrough to indicate obsolete or inaccurate information. This allows you to convey its state without editing or covering the original text.
Click to apply strikethrough to selected text.
You can also use shortcut keys to add strikethrough:
- macOS：⇧ Shift + ⌘ Command + X
- Windows：Ctrl + Shift + X
Underline
Underline adds a horizontal line under the text.
You can use underline to emphasize specific parts of the text or indicate that the text contains a link.
Click to apply underline to selected text.
You can also use shortcut keys to add an underline:
- macOS：⌘ Command + U
- Windows：Ctrl + U
List style
You can organize and emphasize important information in a file by adding lists.
Motiff supports both bulleted and numbered lists. Numbered lists use numerical numbering to differentiate between different levels, switching between numbers, letters, and Roman numerals. Bulleted lists differentiate between levels through varying indents.
Learn more about Create bulleted and numbered lists.
Letter case
You can adjust the letter case of the selected text:
Uppercase: Convert text to UPPER CASE.
Lowercase: Convert text to lower case.
Title Case: Convert the first character of each word to uppercase. This is Title Case .
Truncate text
You can set whether the overflow content of the text is truncated. Clicking 
to enable text truncation will result in ellipses appearing at the end of the text to indicate the hidden text overflow.
When truncation is enabled and the Resizing property is set to Auto Width or Auto Height, the Max lines option will appear in the Type settings panel. You can set the number of lines for the text display.
- Truncate the selected text: Text exceeding the text boundary box will be hidden.
Cancel text truncation: Text exceeding the text boundary box will no longer be hidden.