![]() ![]() ![]() You can reserve more decorative fonts for large-sized text that you use sparingly, and keep legible typefaces for body copy. Pairings: Can you get all of the typographic range you need in your system from one font family? Consider pairing typefaces.marketing website (where brand-personality may carry more weight). Multiple systems: Decide if it makes sense to have one unifying type system or different strategies for different use cases: for instance in-product vs.Personality: Do you have established brand fonts as part of your company's visual identity that makes sense to use?.App performance: Do you have a performance budget? How many fonts do you need to load? Will you leverage fonts that are already-installed on different platforms?.Specifying fontsĪ lot of factors go into the decision of which fonts to use in your system. You'll need enough variety to support all of these use cases, but not so many options that designers don't know when to use which styles. Generally speaking, your standards will need to capture everything from large display typography for headlines, to smaller sizes for body copy. To standardize type across your designs, you'll want to establish a system of fonts, with specific sizes and line heights. If you need right, left, and center aligned text, you can configure these properties separately from the style. It also reduces the work required to maintain them, because you ultimately have less styles you have to update if something changes in your system. When you maintain styles in a simpler format, it reduces the amount of time you have to spend creating them - you no longer have to account for all possible combinations of text, color, alignment, and so on. Although it could take some getting used to, hopefully the benefits of this approach will quickly become clear. If you're used to working in another design tool, you may find it strange that your text styles in Figma don't include traits like color or justification. Text box resizing (horizontal, vertical or fixed).Text box alignment (top, middle, or bottom).Justification (left, right, center, or justified).Properties not included in a Figma text style Other Open Type features (tabular figures, small caps, etc.).Transform (uppercase, lowercase, and capitalization).Decoration (strikethrough and underline).Letter spacing, paragraph spacing, and indentation.If one of the text parameters needs to change as part of an improvement or redesign, then you can push updates to these styles across all files where they have been used ( simply by publishing an update to their original Figma library).īefore we continue, I'll briefly outline which properties are part of Figma's text styles, and which aren't. Text styles remove much of the guesswork and variability from the design process. You can put these styles into a library, then easily share them within your team or across your organization. The text styles functionality in Figma makes it easy to repeatably apply a collection of properties (like line height and size) to text objects in Figma. We'll offer workflow suggestions to make the process of using and implementing text styles more efficient for both designers and developers. In this article we cover what you should think through when it comes to working with type in Figma. Doing so will make it easier for you to scale typography across multiple applications and devices, without complicating the handoff between designers and developers. As a result, you'll need to establish patterns for consistent, legible typography early in the process of creating your design system. Typography forms the foundation of a design just as much as colors and components do.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |