Typography JSON Structure

[matthewmorek]

Background

Typography tokens play a crucial role in improving the developer experience of Kotlin and SwiftUI engineers by providing a standardised and efficient way to implement consistent typography styles in their applications.

Objective

Our goal is to create a universal JSON structure that could be converted from Figma (Tokens Studio) format into a final structure digestible by iOS and Android platforms at build time to generate required typography styles for apps.

Proposal

We're looking for comments on the following proposal for a typography tokens format.

Android (Kotlin)

In Kotlin, TextStyle() is a class that is used to define and configure the style for a text element in an Android application. It allows developers to set properties such as text colour, font size, font weight, and typeface. It provides a way to customise the appearance of text in a consistent and reusable manner.

val textStyle = TextStyle(
    color = Color.Black,
    fontSize = 16.sp,
    fontWeight = FontWeight.Bold,
    fontFamily = FontFamily.SansSerif,
    fontStyle = FontStyle.Italic,
    letterSpacing = 0.1.em
)

Text(
    "Hello World",
    style = textStyle
)

In this code, a TextStyle object is created with various properties like text colour, font size, font weight, font family, font style, and letter spacing.

iOS (SwiftUI/UIKit)

In SwiftUI, developers can create custom typography by using the Font struct and modifiers to define the style for a text element. Here's an example code snippet to demonstrate this:

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello World, this is a line of text.")
            .font(.custom("Helvetica", size: 20))
            .fontWeight(.bold)
            .foregroundColor(.blue)
            .lineLimit(2)
            .lineSpacing(10)
            .leading(.tight)
            .kerning(2)
            .tracking(3)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

In this code, a Text element with the text "Hello World" is created. The font of the text is customised using the .font modifier and specifying the font name and size through the .custom option. The text is made bold by using the .fontWeight modifier with the .bold option. The colour of the text is set to blue using the .foregroundColor modifier. Lastly, the .lineLimit modifier limits the text to only display one line.

JSON Tokens

Based on the information gathered about styling text in both Kotlin and SwiftUI, here’s a suggested sample JSON structure for creating basic typographic features in both languages:

{
  "typography": {
    "heading1": {
      "fontSize": 24,
      "fontWeight": "bold",
      "lineHeight": 30,
      "letterSpacing": 0,
      "textDecoration": "none"
    },
    "heading2": {
      "fontSize": 20,
      "fontWeight": "bold",
      "lineHeight": 26,
      "letterSpacing": 0,
      "textDecoration": "underline"
    },
    "body": {
      "fontSize": 16,
      "fontWeight": "regular",
      "lineHeight": 22,
      "letterSpacing": 0,
      "textDecoration": "none"
    },
    "caption": {
      "fontSize": 12,
      "fontWeight": "regular",
      "lineHeight": 16,
      "letterSpacing": 0,
      "textDecoration": "strikethrough"
    }
  }
}

Specification

The above code can be boiled down to the following structure using JSON Schema.

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "typography": {
      "type": "object",
      "properties": {
        "heading1": {
          "type": "object",
          "properties": {
            "fontSize": {
              "type": "integer",
              "minimum": 1
            },
            "fontWeight": {
              "type": "string",
              "enum": ["bold", "normal"]
            },
            "lineHeight": {
              "type": "integer",
              "minimum": 1
            },
            "letterSpacing": {
              "type": "integer"
            },
            "textDecoration": {
              "type": "string",
              "enum": ["underline", "strikethrough", "none"]
            }
          },
          "required": ["fontSize", "fontWeight", "lineHeight", "letterSpacing", "textDecoration"]
        }
      },
      "required": ["heading1"]
    }
  },
  "required": ["typography"]
}

The above schema will result in a sample object such as this one:

{
  "typography": {
    "heading1": {
      "fontSize": 24,
      "fontWeight": "bold",
      "lineHeight": 30,
      "letterSpacing": 0,
      "textDecoration": "underline"
    }
  }
}

Concerns

Kotlin and SwiftUI typography APIs differ. Will this specification satisfy the requirements of both platforms?