@thi.ng/meta-css/specs/typography.mcss.json

Data-driven CSS framework codegen, transpiler & bundler

{
	"tables": {
		"families": {
			"system": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
			"system-sans-serif": "sans-serif",
			"system-serif": "serif",
			"sans-serif": "'Helvetica Neue', Helvetica, Arial, sans-serif",
			"serif": "Georgia, 'Times New Roman', Times, serif",
			"monospace": "Monaco, Menlo, Consolas, 'Courier New', monospace"
		},
		"100s": [100, 200, 300, 400, 500, 600, 700, 800, 900]
	},
	"specs": [
		{
			"name": "<k>",
			"doc": { "group": "font families" },
			"props": "font-family",
			"values": "families"
		},
		{
			"name": "f<k>",
			"doc": { "group": "font sizes", "desc": "<v>" },
			"key": "i+1",
			"props": "font-size",
			"values": [3, 2.25, 1.5, 1.25, 1, 0.875, 0.75],
			"unit": "rem"
		},
		{
			"name": "f-<k>",
			"doc": { "group": "font sizes", "desc": "<v>" },
			"props": "font-size",
			"values": {
				"title": 6,
				"subtitle": 5
			},
			"unit": "rem"
		},
		{
			"name": "fw<v>",
			"doc": { "group": "font weights" },
			"props": "font-weight",
			"values": "100s"
		},
		{
			"name": "<k>",
			"doc": { "group": "font weights", "desc": "<v>" },
			"props": "font-weight",
			"values": {
				"normal": 400,
				"b": 700
			}
		},
		{
			"name": "<v>",
			"doc": { "group": "font variants" },
			"props": "font-variant",
			"values": ["small-caps"]
		},
		{
			"name": "<v>",
			"doc": { "group": "font style" },
			"props": "font-style",
			"values": ["italic"]
		},
		{
			"name": "<k>",
			"doc": { "group": "text decorations" },
			"props": "text-decoration",
			"values": {
				"underline": "underline",
				"no-underline": "none",
				"strike": "line-through"
			}
		},
		{
			"name": "tt<k>",
			"doc": { "group": "text transforms", "desc": "<v>" },
			"props": "text-transform",
			"values": {
				"c": "capitalize",
				"l": "lowercase",
				"i": "initial",
				"n": "none",
				"u": "uppercase",
				"fw": "full-width",
				"fsk": "full-size-kana"
			}
		},
		{
			"name": "t<k>",
			"doc": { "group": "text align", "desc": "<v>" },
			"props": "text-align",
			"values": {
				"c": "center",
				"j": "justify",
				"l": "left",
				"r": "right"
			}
		},
		{
			"name": "v-<k>",
			"doc": { "group": "vertical align", "desc": "<v>" },
			"props": "vertical-align",
			"values": {
				"base": "baseline",
				"btm": "bottom",
				"mid": "middle",
				"top": "top"
			}
		},
		{
			"name": "lh-<k>",
			"doc": { "group": "line heights", "desc": "<v>" },
			"props": "line-height",
			"values": {
				"0": 0,
				"solid": 1,
				"title": 1.25,
				"copy": 1.5,
				"double": 2
			}
		},
		{
			"name": "ws-<v>",
			"doc": { "group": "whitespace" },
			"props": "white-space",
			"values": ["normal", "nowrap", "pre"]
		},
		{
			"name": "ls-<k>",
			"doc": { "group": "letter spacing", "desc": "<v>" },
			"props": "letter-spacing",
			"values": {
				"-2": -0.05,
				"-1": -0.025,
				"0": 0,
				"1": 0.05,
				"2": 0.1,
				"3": 0.2
			},
			"unit": "em"
		}
	],
	"templates": [
		{
			"name": "font-family",
			"doc": {
				"group": "font families",
				"args": ["name: variable name (without `--` prefix)"],
				"desc": "Variable-based font-family"
			},
			"props": { "font-family": "var(--{0})" }
		}
	]
}