Typography

Synchronicity uses system fonts for optimal performance and native feel. The type scale is designed for clarity and hierarchy.

Font Families

const fontFamily = {
  sans: 'System',           // SF Pro on iOS, Roboto on Android
  serif: 'Georgia',         // For contemplative, literary content
  mono: 'Menlo',           // For code and technical content
};

Type Scale

The scale follows a harmonious progression based on a 1.25 ratio.

display 48px / 700 Synchronicity

h1 32px / 700 The Creative

h2 24px / 600 Heaven Above

h3 20px / 600 Six Dragons

body-lg 17px / 500 The movement of heaven is powerful.

body 15px / 400 The superior person makes themselves strong and untiring.

body-sm 13px / 400 Nine in the second place means success.

caption 12px / 500 HEXAGRAM 1 OF 64

footnote 11px / 400 Reference: Wilhelm/Baynes translation

Font Weights

Weight	Value	Usage
regular	400	Body text, descriptions
medium	500	Emphasized body, labels
semibold	600	Subheadings, important UI
bold	700	Headlines, primary actions

Line Heights

Line heights are proportional to create comfortable reading:

Size	Line Height	Ratio
display	56px	1.17
h1	40px	1.25
h2	32px	1.33
h3	28px	1.40
body-lg	26px	1.53
body	22px	1.47
body-sm	18px	1.38
caption	16px	1.33
footnote	14px	1.27

Letter Spacing

Subtle letter spacing adjustments improve readability:

const letterSpacing = {
  tight: -0.5,    // Headlines
  normal: 0,      // Body text
  wide: 0.5,      // Captions, labels
  wider: 1.0,     // All-caps text
};

Semantic Typography

Use semantic tokens for consistent hierarchy:

Token	Usage
`title`	Page titles, hero text
`heading`	Section headers
`subheading`	Subsection headers
`body`	Main content
`label`	Form labels, UI text
`caption`	Supporting info

Usage in Code

import { useTheme } from '@synchronicity/react-native';

function HexagramTitle({ name, number }) {
  const { typography } = useTheme();

  return (
    <View>
      <Text style={{
        fontSize: typography.h1.fontSize,
        fontWeight: typography.h1.fontWeight,
        lineHeight: typography.h1.lineHeight,
      }}>
        {name}
      </Text>
      <Text style={{
        fontSize: typography.caption.fontSize,
        fontWeight: typography.caption.fontWeight,
        letterSpacing: typography.letterSpacing.wide,
      }}>
        HEXAGRAM {number}
      </Text>
    </View>
  );
}

Best Practices

Limit hierarchy levels - Use 2-3 heading levels per screen maximum
Maintain contrast - Pair font sizes with appropriate weights
Respect line length - Keep body text to 45-75 characters per line
Use semantic tokens - Avoid hardcoding font sizes