Typography

Typography tokens define one single text style, such as 12px bold Lato, 150% line spacing.

Example Token Payload

This is what the typography payload looks like:

                                        
                                        
                                        {
                                          "id": string
                                          "name": string
                                          "description": string
                                          "tokenType": "Typography"
                                          "origin": ItemOrigin | null
                                          "value": {
                                            "font": {
                                              "family": string,
                                              "subfamily": string
                                              "referencedToken": Font | null
                                            },
                                            "fontSize": {
                                              "unit": "px",
                                              "measure": double
                                              "referencedToken": Measure | null
                                            },
                                            "letterSpacing": {
                                              "unit": "px",
                                              "measure": double
                                              "referencedToken": Measure | null
                                            },
                                            "lineHeight": {
                                              "unit": "px",
                                              "measure": double
                                              "referencedToken": Measure | null
                                            },
                                            "paragraphIndent": {
                                              "unit": "px",
                                              "measure": double
                                              "referencedToken": Measure | null
                                            },
                                            "textDecoration": "None" | "Underline" | "Strikethrough"
                                            "textCase": "Original" | "Upper" | "Lower" | "Camel"
                                            "referencedToken": Typography | null
                                          }
                                        }
                                        
                                        

Associated functions

You can use the following functions to retrieve typography tokens from your design system:

• @ds.allTokens
• @ds.tokensByType (with "Typography") attribute
• @ds.tokensByGroupId