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. !['容器 270.png'](https://static.motiffcontent.com/public/resource/cms/image/l2ofwvk4i.png) 1. Click !['16_panel_style.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/kf4r98uxe.svg) to view, create, and apply text styles. 2. Click !['16_common_arrow-down.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/lnsrj1qfl.svg) to browse the list of web and local fonts to find the font you need. 3. Click !['16_common_arrow-down.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/vbnnhxe2m.svg) to adjust font weight or style. 4. Click !['16_common_arrow-down.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/z199yppsw.svg) 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 !['16_Panel_AutoWidthHorizontal.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/j0qjzo2j2.svg) !['16_Panel_TextResizeHeight.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/c1noien9v.svg) !['16_Panel_TextResizeFixed.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/sd5tap2vx.svg) 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 !['16_panel_more.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/73cmvcp21.svg) 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 !['16_panel_more.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/ra828kmep.svg) in the lower right corner of the **Text** modal to open the **Type settings** panel. !['Type settings.png'](https://static.motiffcontent.com/public/resource/cms/image/agjvqezp9.png) * **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 !['16_common_arrow-down.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/lnsrj1qfl.svg) 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) :::wk-block{.tip} 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 (%). :::wk-block{.tip} 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: * !['16_Panel_AutoWidthHorizontal.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/j0qjzo2j2.svg) **Auto width**: With auto width, the width of the text layer increases with the addition of text content. * !['16_Panel_TextResizeHeight.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/c1noien9v.svg) **Auto height**: With auto height, the height of the text layer increases with the addition of text content. * !['16_Panel_TextResizeFixed.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/sd5tap2vx.svg) **Fixed size**: With fixed size, the width and height of the text layer remain unchanged regardless of the layer’s contents. :::wk-block{.note} 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. * !['16_Panel_TextAlignLeft.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/87g3ylri4.svg) Left * !['16_Panel_TextAlignCenter.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/n1m7h1pnr.svg) Center * !['16_Panel_TextAlignRight.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/wiy63wvrc.svg) Right * !['16_Panel_TextAlignJustified (2).svg'](https://motiff.fbcontent.cn/public/resource/cms/image/6p8qbbzkn.svg) Justified :::wk-block{.tip} 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. * !['16_Panel_AlignTop.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/0lcsdirmp.svg) Top * !['16_Panel_AlignVerticalCenter.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/p4y4wp5xx.svg) Middle * !['16_Panel_AlignBottom.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/qgicpvxw7.svg) Bottom :::wk-block{.tip} 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: * !['16_Panel_TextDecorationStrikethrough.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/oilkg1nd8.svg) Strikethrough * !['16_Panel_TextDecorationUnderline.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/bl2kp165s.svg) 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 !['16_Panel_TextDecorationStrikethrough.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/oilkg1nd8.svg) 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 !['16_Panel_TextDecorationUnderline.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/bl2kp165s.svg) 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](https://wukong-abroad-test.zhenguanyu.com/help/docs/articles/99271265392896). ## Letter case You can adjust the letter case of the selected text: * !['16_Panel_TextTransformUpper.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/w81doi01s.svg) Uppercase: Convert text to UPPER CASE. * !['16_Panel_TextTransformLower.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/zj0ffds7m.svg) Lowercase: Convert text to lower case. * !['16_Panel_TextTransformCapitalize.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/dq8uqwcn1.svg) 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 !['16_Panel_TextEllipsis.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/hxrawewoe.svg) 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. * !['16_Panel_TextEllipsis.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/hxrawewoe.svg) Truncate the selected text: Text exceeding the text boundary box will be hidden. * !['16_Desktop_WinMinimize.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/22p69ajfn.svg) Cancel text truncation: Text exceeding the text boundary box will no longer be hidden. ![Truncate text](https://static.motiffcontent.com/public/resource/cms/video/c1cddd05-b5a6-450a-ac8f-652be5a06831.mp4)