Preview Typography
What It Does
The Preview Typography node creates a visual preview of typography tokens, allowing designers and developers to see how text appears with the specified typographic styling. It renders sample text using the font properties defined in the typography tokens.
Inputs
| Name | Description | Type | Required |
|---|---|---|---|
| Value | The typography tokens to preview | List | Yes |
| Text | The sample text to display (defaults to "The quick brown fox jumps over the lazy dog") | String | No |
Outputs
| Name | Description | Type |
|---|---|---|
| None | This node is primarily for visual preview and does not produce output data | - |
How to Use It
- Drag the Preview Typography node into your graph.
- Connect a list of typography tokens to the "Value" input.
- Optionally, provide custom text in the "Text" input to see your specific content with the typography styles.
- The node will display a visual preview of each typography token applied to the sample text.
Tips
- Use this node as a visual check when creating or modifying typography tokens.
- The default pangram ("The quick brown fox...") is useful as it contains all letters of the alphabet.
- Customize the preview text to see how specific content will look with your typography tokens.
See Also
- Create Typography: For creating typography tokens.
- Create Typography Token: For generating typography design tokens.
Use Cases
- Typography Validation: Quickly verify the appearance of typography tokens during design system development.
- Visual Documentation: Generate visual examples of typography styles for design system documentation.
- Style Comparison: Compare multiple typography tokens to ensure visual consistency across your design system.