Typography Setup
Test and refine color combinations with APCA-based metrics for accessible, high-contrast designs
Type Setting Variables
We would use this Type setting in Text Styles, also consider for consistency purposes using Generic Sizes
{
"variables": {
"Type/Font Family/Primary": {
"type": "string",
"value": "Arial",
"description": "Primary font family"
},
"Type/Font Family/Secondary": {
"type": "string",
"value": "Verdana",
"description": "Secondary font family"
},
"Type/Font Weight/Regular": {
"type": "number",
"value": 400,
"description": "Regular font weight"
},
"Type/Font Weight/Bold": {
"type": "number",
"value": 700,
"description": "Bold font weight"
},
"Type/Font Weight/Black": {
"type": "number",
"value": 900,
"description": "Black font weight"
},
"Type/Font Size/Caption": {
"type": "number",
"value": "Sizes/4",
"description": "Caption font size"
},
"Type/Font Size/Body": {
"type": "number",
"value": "Sizes/5",
"description": "Body font size"
},
"Type/Font Size/Subtitle": {
"type": "number",
"value": "Sizes/6",
"description": "Subtitle font size"
},
"Type/Font Size/Title": {
"type": "number",
"value": "Sizes/7",
"description": "Title font size"
},
"Type/Font Size/Medium Title": {
"type": "number",
"value": "Sizes/8",
"description": "Medium Title font size"
},
"Type/Font Size/Big Title": {
"type": "number",
"value": "Sizes/9",
"description": "Big Title font size"
},
"Type/Font Size/Huge Title": {
"type": "number",
"value": "Sizes/11",
"description": "Huge Title font size"
},
"Type/Line Height/Caption": {
"type": "number",
"value": "Sizes/5",
"description": "Caption line height (matches Body font size)"
},
"Type/Line Height/Body": {
"type": "number",
"value": "Sizes/6",
"description": "Body line height (matches Subtitle font size)"
},
"Type/Line Height/Subtitle": {
"type": "number",
"value": "Sizes/7",
"description": "Subtitle line height (matches Title font size)"
},
"Type/Line Height/Title": {
"type": "number",
"value": "Sizes/8",
"description": "Title line height (matches Medium Title font size)"
},
"Type/Line Height/Medium Title": {
"type": "number",
"value": "Sizes/9",
"description": "Medium Title line height (matches Big Title font size)"
},
"Type/Line Height/Big Title": {
"type": "number",
"value": "Sizes/11",
"description": "Big Title line height (matches Huge Title font size)"
},
"Type/Line Height/Huge Title": {
"type": "number",
"value": 120,
"description": "Huge Title line height (no matching size variable)"
},
"Type/Letter Spacing/Default": {
"type": "number",
"value": 0,
"description": "Default letter spacing"
},
"Type/Letter Spacing/Tight": {
"type": "number",
"value": -0.5,
"description": "Tight letter spacing"
},
"Type/Letter Spacing/Wide": {
"type": "number",
"value": 0.5,
"description": "Wide letter spacing"
}
}
}
Typography styles
Generic Scheme is the main sizes that we would use everywhere in our design system to be consistent, by default it is using Tesla scheme
but if you want you can experiment with Material Design Fibonacci or other size metrics
{
"textStyles": {
"Primary/Regular/Caption": {
"fontSize": "Type/Font Size/Caption",
"fontFamily": "Type/Font Family/Primary",
"fontWeight": "Type/Font Weight/Regular",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Caption"
},
"Primary/Regular/Body": {
"fontSize": "Type/Font Size/Body",
"fontFamily": "Type/Font Family/Primary",
"fontWeight": "Type/Font Weight/Regular",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Body"
},
"Primary/Regular/Subtitle": {
"fontSize": "Type/Font Size/Subtitle",
"fontFamily": "Type/Font Family/Primary",
"fontWeight": "Type/Font Weight/Regular",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Subtitle"
},
"Primary/Regular/Title": {
"fontSize": "Type/Font Size/Title",
"fontFamily": "Type/Font Family/Primary",
"fontWeight": "Type/Font Weight/Regular",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Title"
},
"Primary/Regular/Medium Title": {
"fontSize": "Type/Font Size/Medium Title",
"fontFamily": "Type/Font Family/Primary",
"fontWeight": "Type/Font Weight/Regular",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Medium Title"
},
"Primary/Regular/Big Title": {
"fontSize": "Type/Font Size/Big Title",
"fontFamily": "Type/Font Family/Primary",
"fontWeight": "Type/Font Weight/Regular",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Big Title"
},
"Primary/Regular/Huge Title": {
"fontSize": "Type/Font Size/Huge Title",
"fontFamily": "Type/Font Family/Primary",
"fontWeight": "Type/Font Weight/Regular",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Huge Title"
},
"Primary/Bold/Caption": {
"fontSize": "Type/Font Size/Caption",
"fontFamily": "Type/Font Family/Primary",
"fontWeight": "Type/Font Weight/Bold",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Caption"
},
"Primary/Bold/Body": {
"fontSize": "Type/Font Size/Body",
"fontFamily": "Type/Font Family/Primary",
"fontWeight": "Type/Font Weight/Bold",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Body"
},
"Primary/Bold/Subtitle": {
"fontSize": "Type/Font Size/Subtitle",
"fontFamily": "Type/Font Family/Primary",
"fontWeight": "Type/Font Weight/Bold",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Subtitle"
},
"Primary/Bold/Title": {
"fontSize": "Type/Font Size/Title",
"fontFamily": "Type/Font Family/Primary",
"fontWeight": "Type/Font Weight/Bold",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Title"
},
"Primary/Bold/Medium Title": {
"fontSize": "Type/Font Size/Medium Title",
"fontFamily": "Type/Font Family/Primary",
"fontWeight": "Type/Font Weight/Bold",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Medium Title"
},
"Primary/Bold/Big Title": {
"fontSize": "Type/Font Size/Big Title",
"fontFamily": "Type/Font Family/Primary",
"fontWeight": "Type/Font Weight/Bold",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Big Title"
},
"Primary/Bold/Huge Title": {
"fontSize": "Type/Font Size/Huge Title",
"fontFamily": "Type/Font Family/Primary",
"fontWeight": "Type/Font Weight/Bold",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Huge Title"
},
"Primary/Black/Caption": {
"fontSize": "Type/Font Size/Caption",
"fontFamily": "Type/Font Family/Primary",
"fontWeight": "Type/Font Weight/Black",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Caption"
},
"Primary/Black/Body": {
"fontSize": "Type/Font Size/Body",
"fontFamily": "Type/Font Family/Primary",
"fontWeight": "Type/Font Weight/Black",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Body"
},
"Primary/Black/Subtitle": {
"fontSize": "Type/Font Size/Subtitle",
"fontFamily": "Type/Font Family/Primary",
"fontWeight": "Type/Font Weight/Black",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Subtitle"
},
"Primary/Black/Title": {
"fontSize": "Type/Font Size/Title",
"fontFamily": "Type/Font Family/Primary",
"fontWeight": "Type/Font Weight/Black",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Title"
},
"Primary/Black/Medium Title": {
"fontSize": "Type/Font Size/Medium Title",
"fontFamily": "Type/Font Family/Primary",
"fontWeight": "Type/Font Weight/Black",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Medium Title"
},
"Primary/Black/Big Title": {
"fontSize": "Type/Font Size/Big Title",
"fontFamily": "Type/Font Family/Primary",
"fontWeight": "Type/Font Weight/Black",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Big Title"
},
"Primary/Black/Huge Title": {
"fontSize": "Type/Font Size/Huge Title",
"fontFamily": "Type/Font Family/Primary",
"fontWeight": "Type/Font Weight/Black",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Huge Title"
},
"Secondary/Regular/Caption": {
"fontSize": "Type/Font Size/Caption",
"fontFamily": "Type/Font Family/Secondary",
"fontWeight": "Type/Font Weight/Regular",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Caption"
},
"Secondary/Regular/Body": {
"fontSize": "Type/Font Size/Body",
"fontFamily": "Type/Font Family/Secondary",
"fontWeight": "Type/Font Weight/Regular",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Body"
},
"Secondary/Regular/Subtitle": {
"fontSize": "Type/Font Size/Subtitle",
"fontFamily": "Type/Font Family/Secondary",
"fontWeight": "Type/Font Weight/Regular",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Subtitle"
},
"Secondary/Regular/Title": {
"fontSize": "Type/Font Size/Title",
"fontFamily": "Type/Font Family/Secondary",
"fontWeight": "Type/Font Weight/Regular",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Title"
},
"Secondary/Regular/Medium Title": {
"fontSize": "Type/Font Size/Medium Title",
"fontFamily": "Type/Font Family/Secondary",
"fontWeight": "Type/Font Weight/Regular",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Medium Title"
},
"Secondary/Regular/Big Title": {
"fontSize": "Type/Font Size/Big Title",
"fontFamily": "Type/Font Family/Secondary",
"fontWeight": "Type/Font Weight/Regular",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Big Title"
},
"Secondary/Regular/Huge Title": {
"fontSize": "Type/Font Size/Huge Title",
"fontFamily": "Type/Font Family/Secondary",
"fontWeight": "Type/Font Weight/Regular",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Huge Title"
},
"Secondary/Bold/Caption": {
"fontSize": "Type/Font Size/Caption",
"fontFamily": "Type/Font Family/Secondary",
"fontWeight": "Type/Font Weight/Bold",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Caption"
},
"Secondary/Bold/Body": {
"fontSize": "Type/Font Size/Body",
"fontFamily": "Type/Font Family/Secondary",
"fontWeight": "Type/Font Weight/Bold",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Body"
},
"Secondary/Bold/Subtitle": {
"fontSize": "Type/Font Size/Subtitle",
"fontFamily": "Type/Font Family/Secondary",
"fontWeight": "Type/Font Weight/Bold",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Subtitle"
},
"Secondary/Bold/Title": {
"fontSize": "Type/Font Size/Title",
"fontFamily": "Type/Font Family/Secondary",
"fontWeight": "Type/Font Weight/Bold",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Title"
},
"Secondary/Bold/Medium Title": {
"fontSize": "Type/Font Size/Medium Title",
"fontFamily": "Type/Font Family/Secondary",
"fontWeight": "Type/Font Weight/Bold",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Medium Title"
},
"Secondary/Bold/Big Title": {
"fontSize": "Type/Font Size/Big Title",
"fontFamily": "Type/Font Family/Secondary",
"fontWeight": "Type/Font Weight/Bold",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Big Title"
},
"Secondary/Bold/Huge Title": {
"fontSize": "Type/Font Size/Huge Title",
"fontFamily": "Type/Font Family/Secondary",
"fontWeight": "Type/Font Weight/Bold",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Huge Title"
},
"Secondary/Black/Caption": {
"fontSize": "Type/Font Size/Caption",
"fontFamily": "Type/Font Family/Secondary",
"fontWeight": "Type/Font Weight/Black",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Caption"
},
"Secondary/Black/Body": {
"fontSize": "Type/Font Size/Body",
"fontFamily": "Type/Font Family/Secondary",
"fontWeight": "Type/Font Weight/Black",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Body"
},
"Secondary/Black/Subtitle": {
"fontSize": "Type/Font Size/Subtitle",
"fontFamily": "Type/Font Family/Secondary",
"fontWeight": "Type/Font Weight/Black",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Subtitle"
},
"Secondary/Black/Title": {
"fontSize": "Type/Font Size/Title",
"fontFamily": "Type/Font Family/Secondary",
"fontWeight": "Type/Font Weight/Black",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Title"
},
"Secondary/Black/Medium Title": {
"fontSize": "Type/Font Size/Medium Title",
"fontFamily": "Type/Font Family/Secondary",
"fontWeight": "Type/Font Weight/Black",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Medium Title"
},
"Secondary/Black/Big Title": {
"fontSize": "Type/Font Size/Big Title",
"fontFamily": "Type/Font Family/Secondary",
"fontWeight": "Type/Font Weight/Black",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Big Title"
},
"Secondary/Black/Huge Title": {
"fontSize": "Type/Font Size/Huge Title",
"fontFamily": "Type/Font Family/Secondary",
"fontWeight": "Type/Font Weight/Black",
"letterSpacing": "Type/Letter Spacing/Default",
"lineHeight": "Type/Line Height/Huge Title"
}
}
}