Typography

Typography is essential for clear communication and brand identity in Teardrop Design System.

Typography System

Teardrop provides a consistent typography system with defined scales, weights, and line heights for both Hardwater and Hardwater Studios.

Font Families

Hardwater

Primary Font:

-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif

Monospace Font:

'SF Mono', Monaco, 'Cascadia Code', monospace

Hardwater Studios

Primary Font:

'Inter', -apple-system, BlinkMacSystemFont, sans-serif

Display Font:

'Poppins', sans-serif

Monospace Font:

'JetBrains Mono', 'SF Mono', monospace

Type Scale

Hardwater Scale

Element	Font Size	Line Height	Font Weight	Usage
Heading 1	32px	40px	600	Page titles
Heading 2	24px	32px	600	Section titles
Heading 3	20px	28px	600	Subsection titles
Body	16px	24px	400	Body text
Small	14px	20px	400	Secondary text
Caption	12px	16px	400	Labels, captions

Hardwater Studios Scale

Element	Font Size	Line Height	Font Weight	Usage
Display	48px	56px	700	Hero headings
Heading 1	36px	44px	600	Page titles
Heading 2	28px	36px	600	Section titles
Heading 3	22px	30px	600	Subsection titles
Body	16px	24px	400	Body text
Small	14px	20px	400	Secondary text
Caption	12px	16px	400	Labels, captions

Font Weights

Weight	Value	Usage
Regular	400	Body text, default
Medium	500	Emphasis
Semibold	600	Headings
Bold	700	Strong emphasis (Studios only)

Using Typography

In Components

import { Text, Heading } from '@hardwater/teardrop';

<Heading level={1}>Page Title</Heading>
<Text>Body text content</Text>
<Text size="small">Secondary text</Text>

In CSS

.heading-1 {
  font-family: var(--teardrop-typography-heading-1-font-family);
  font-size: var(--teardrop-typography-heading-1-font-size);
  font-weight: var(--teardrop-typography-heading-1-font-weight);
  line-height: var(--teardrop-typography-heading-1-line-height);
}

With Tokens

import { tokens } from '@hardwater/teardrop';

const headingStyle = {
  fontFamily: tokens.typography.heading[1].fontFamily,
  fontSize: tokens.typography.heading[1].fontSize,
  fontWeight: tokens.typography.heading[1].fontWeight,
  lineHeight: tokens.typography.heading[1].lineHeight,
};

Typography Components

Heading

<Heading level={1}>Main Title</Heading>
<Heading level={2}>Section Title</Heading>
<Heading level={3}>Subsection Title</Heading>

Text

<Text>Body text</Text>
<Text size="small">Small text</Text>
<Text weight="medium">Medium weight text</Text>

Code

<Code>const example = 'code';</Code>
<Code block>
  {`function example() {
    return 'code block';
  }`}
</Code>

Hierarchy

Establish clear visual hierarchy:

1. Primary - Heading 1 for main page titles
2. Secondary - Heading 2 for major sections
3. Tertiary - Heading 3 for subsections
4. Body - Regular text for content
5. Supporting - Small text for metadata, captions

Best Practices

Readability

1. Line length - Keep lines between 45-75 characters
2. Line height - Use provided line heights for readability
3. Spacing - Use consistent spacing between elements
4. Contrast - Ensure sufficient color contrast

Hierarchy

1. Use scale consistently - Don't skip levels
2. Limit heading levels - Use 2-3 levels per page
3. Visual weight - Use weight and size to show importance

Accessibility

1. Semantic HTML - Use proper heading tags (<h1>, <h2>, etc.)
2. Resizable text - Support user font size preferences
3. Sufficient contrast - Meet WCAG AA standards

Responsive Typography

Typography scales appropriately across breakpoints:

/* Mobile */
.heading-1 {
  font-size: 24px;
  line-height: 32px;
}

/* Desktop */
@media (min-width: 768px) {
  .heading-1 {
    font-size: 32px;
    line-height: 40px;
  }
}

Resources

• Design Tokens
• Color
• Accessibility
• Components