This can determine how easy your text is to read.
Letter spacing lets you define the space between characters in a word, line, or paragraph. Each platform has a different way of representing line height.įigma includes the appropriate values and measurements for each platform, as well as alternative units of measurement. Translating line height: The Inspect panel allows you to view your designs as code. You can switch between fixed and percentage line heights and Figma will convert the value for you, to the nearest pixel.
Windows: Hold down Alt Shift and to decrease.įigma allows you to set a fixed line height in pixels (px) or a line height that's a percentage of the font size (%).įigma uses a font's intrinsic line height as the default value( Auto), which varies between typefaces. Mac: Hold down ⇧ Shift ⌥ Option and to decrease. Use the field to adjust the vertical space between lines of text, or use the keyboard shortcuts: Large line heights can make text look messy and disjointed. Small line heights can make text difficult to read. This can help to balance designs and improve readability of your copy. Line height allows you to control the vertical distance between lines of text in a paragraph. If you're exporting your designs to PDF, Figma will render font size using traditional print points (pt). You can view the CSS pixel value (px) of any text in the Inspect panel. If you're translating your designs to code, your screen resolution will determine the actual size of any text. Windows: Hold down Ctrl Shift and to decrease.įigma represents text sizes in a few different ways. Mac: Hold down Shift ⌘ Command and to decrease. Click the arrow to select a default font size. There are a few ways to adjust font size: Figma represents font size in density-independent pixels.Īdjust the font size using the field next to the font style. Windows: Hold down Ctrl Alt and to decrease.įont size controls the scale of your text. Mac: Hold down ⌥ Option ⌘ Command and to decrease. Use the keyboard shortcuts to increase and decrease the font weight. Click the arrow to explore styles for thee selected font. Adjust the font weight using the field directly below the font family. You can access weights once you select the font family. Some of the styles for the Roboto font family are: thin, light, regular, and medium. Every font family will come with its own selection of styles. Font weightĪ typeface can have any number of styles or weights. Click the arrow to explore styles for thee selected font. You can select another font family using the font picker. A font family is the collection of styles that make up a typeface.For example: Helvetica, Times New Roman and Roboto are all font families.įigma will use Roboto as the default font for new text layers. A font is a file containing the visual details that make up the design of each glyph or letter in that typeface. 
A typeface is a set of letterforms and glyphs with similar design features. There are a few terms associated with a font: Click to open the type details menu and explore more text properties. Adjust the vertical alignment of text within the text box. Adjust the horizontal alignment of text within the text box. Select how text overflows or wraps with resizing behavior. Adjust the vertical distance between paragraphs with paragraph spacing. Adjust the horizontal distance between letters with letter spacing. Adjust the vertical distance between lines of text using the line height field. Use the arrow to adjust the size of your text. Use the arrow to select a font style or weight. Click the arrow to browse a list of web, local and shared fonts to find a typeface or font family. Click the icon to view, create and apply Text Styles. Click the link to learn more about each property. Use the annotated image below to identify each property in the properties panel. Text in the properties panelĪpply and adjust text properties in the Text section of the properties panel. As there are a number of properties available we've grouped them by location. In this article, we'll take you through all the properties available for text. Text properties allows you to control everything from the appearance and position of text, to resizing behavior and OpenType features. Everything from the placement to font choice, has a part to play. Text is a crucial aspect of interface design. Users with can edit access to a file can apply and adjust text properties.
0 kommentar(er)
