Typography

Typography tokens in the Editor

Jux supports typography tokens as a composite token that binds together the following properties:

  1. Font family

  2. Font size

  3. Font weight

  4. Line height

  5. Letter spacing

Each of the fields can be tokenized by itself (by pointing to another token of a relevant type)

  1. Font family - unique font family token

  2. Font size - dimension token

  3. Font weight - unique font weight token (soon)

  4. Line height - dimension token

  5. Letter spacing - dimension token

Note

There are other text properties that exist in the text module, but are not part of the typography composite token, such as text color and text alignment.

Typography tokens have these fields:

  1. A name (like "blue-500" or "primary-bg")

  2. A folder path (like "color/core/blue-500")

  3. Optional - an alias to another token

  4. Font family

  5. Font size

  6. Font weight

  7. Optional - Line height

  8. Optional - Letter spacing

  9. Optional - description

Typography tokens can only be used in the text module.

Each typography field can be tokenized by clicking on the โ€˜token icon buttonโ€™ that appears on the right side of the field upon hover. When the typography field is tokenized - the 5 subfields are disabled. In order to enable them - the typography token must be detached.


Under the hood

JUX adheres to the W3C Community groupโ€™s draft guidelines regarding typography tokens (section 9.7.) and stores the token as a JSON file with the following structure:

{
	// Our opinianated structure uses type-based groups at the root level
	"Typography": {
		// We like to use core/semantic/specific as the base groups in all token
		// types, but this group's name can be any valid JSON identifier
		"core": {
		  // Token names must be valid JSON identifiers, e.g. "Foo", "foo_0", "spacing_xs"
			"heading_1": {
			  // Specifying the type here might seem redundant since the type is used
			  // as the root-level grouping, but this is part of the W3C group's specs
				"$type": "Typography",
				"$value": "Inter"
				"$description": "Use for basic text"
			}
		}
	}
}
PropertyTypeDescription

$type

string

Required. "typography"

$value

object

Required. Specify any typographic CSS properties in camelCase format. Although the spec limits the properties to only a few, Cobalt allows any valid attributes including letterSpacing, fontVariant, etc.

$description

string

(Optional) A description of this token and its intended usage.

Last updated