Skip to content
Specs

Typography

A Typography object holds individual text style properties. It appears on the typography style property as an alternative to a TokenReference — when the text style is not backed by a single token, the individual properties are listed instead.

interface Typography {
  fontSize?: number | 'mixed' | TokenReference;
  fontFamily?: string | 'mixed' | TokenReference;
  fontStyle?: string | 'mixed' | TokenReference;
  lineHeight?: string | number | TokenReference;
  letterSpacing?: number | 'mixed' | TokenReference;
  textCase?: string | 'mixed' | TokenReference;
  textDecoration?: string | 'mixed' | TokenReference;
  paragraphIndent?: number | TokenReference;
  paragraphSpacing?: number | TokenReference;
  leadingTrim?: 'NONE' | 'CAP_HEIGHT' | 'mixed';
  listSpacing?: number | TokenReference;
  hangingPunctuation?: boolean | TokenReference;
  hangingList?: boolean | TokenReference;
}

Properties

NameCategoryDescription
fontFamilyfontFont family name
fontSizefontFont size in pixels
fontStylefontFont style (e.g. "Regular", "Bold Italic")
hangingListformattingEnable hanging list markers
hangingPunctuationformattingEnable hanging punctuation
leadingTrimspacingLeading trim mode
letterSpacingspacingLetter spacing in pixels
lineHeightspacingLine height (number for pixels, string for percentages like "150%")
listSpacingspacingSpacing between list items
paragraphIndentspacingFirst-line indent in pixels
paragraphSpacingspacingSpacing between paragraphs in pixels
textCaseformattingText transform (e.g. "UPPER", "LOWER", "TITLE")
textDecorationformattingText decoration (e.g. "UNDERLINE", "STRIKETHROUGH")

Values

NameDescriptionExample
numberLiteral numeric value16
stringLiteral string value"Inter"
booleanLiteral boolean valuetrue
'mixed'Multiple conflicting values within a single text node"mixed"
TokenReferenceReference to a design token{ $token: "DS.Font.Size.400", $type: "dimension" }
'NONE' | 'CAP_HEIGHT'Leading trim enum (for leadingTrim only)"CAP_HEIGHT"

Example

fontSize: 14
fontFamily: Inter
fontStyle: Medium
lineHeight: "150%"
letterSpacing: 0

Further Reading