For example, the download glyph shown below has more visual weight on the bottom than on the top, which can make it look too low if it’s geometrically centered.Īn asymmetric download glyph can look off center even though it’s not. Some glyphs - especially asymmetric glyphs - can look unbalanced when you center them geometrically instead of optically. If necessary, add padding to a custom glyph to achieve optical alignment. If you’re creating a custom symbol, you can adjust its weight to match nearby text for guidance, see A Closer Look at SF Symbols. Unless you want to emphasize either the glyphs or the text, using the same weight for both gives your content a consistent appearance and level of emphasis. In general, match the weights of glyphs and adjacent text. and use the same stroke thickness in every glyph. To help achieve visual consistency, adjust individual glyph sizes as necessary. In this case, you could give both glyphs a consistent optical weight by slightly increasing the dimensions of the triangle. For example, a solid square and a solid triangle can both have the same width and height, but people typically perceive the square as being larger than the triangle. Sometimes, using the same dimensions for each glyph isn’t enough to make a set of glyphs appear visually consistent. Whether you use only custom glyphs or mix custom and system-provided glyphs, all glyphs in your app should use a consistent size, level of detail, stroke thickness, and perspective.
Maintain visual consistency across all glyphs in your app. In general, glyphs work best when they use familiar visual metaphors that are directly related to the actions they initiate or content they represent. Strive for a simple, universal design that most people will recognize quickly. Too many details can make a glyph confusing or unreadable. Whether you create a custom symbol or template image, the following guidelines can help you design a glyph that works well in your app and looks at home in the system.Ĭreate a recognizable, highly simplified design. Regardless of the system your app runs in, if you can’t find a system-defined glyph that meets your needs, consider using a different SF symbol, or design a custom glyph that communicates exactly what you want.
Although you can color a template image and modify its scale and alignment relative to text, using SF symbols streamlines the process and supports Dynamic Type text-size changes. Using a symbol lets you control a glyphʼs emphasis and accent color while preserving its weight matching and alignment with adjacent text. SF symbols are scalable, vector-based images that come in weights that correspond to the weights of the system fonts. Beginning in iOS 13, macOS 11, watchOS 6, and tvOS 13, the system uses SF symbols to supply the glyphs it defines earlier versions of the system use template images that work as masks to define glyph shapes.
0 kommentar(er)
