Typography

The Typography component provides a powerful way to create consistent, theme-aware text styling across your React Native application. It automatically handles theme colors, responsive design, and provides a comprehensive set of predefined text variants.

🔤 Typography System

The Typography component is built on top of the @mapples/style typography system, providing consistent text styling with automatic theme integration.

Basic Usage

Import the Typography Component

Import the Typography component from @mapples/style:

import { Typography } from '@mapples/style';

Basic Typography Usage

🎨 Basic Usage

Use the Typography component with different variants:

import React from 'react';
import { View } from 'react-native';
import { Typography } from '@mapples/style';

const TextExample = () => {
  return (
    <View>
      <Typography variant="heading1">Main Title</Typography>
      <Typography variant="heading2">Section Title</Typography>
      <Typography variant="heading3">Subsection Title</Typography>
      <Typography variant="body">Body text content</Typography>
      <Typography variant="caption">Small caption text</Typography>
    </View>
  );
};

Typography Variants

Available Variants

📝 Typography Variants

The Typography component supports multiple predefined variants:

// Display and heading variants
<Typography variant="display">Display Text</Typography>
<Typography variant="heading1">Heading 1</Typography>
<Typography variant="heading2">Heading 2</Typography>
<Typography variant="heading3">Heading 3</Typography>
<Typography variant="heading4">Heading 4</Typography>

// Body text variants
<Typography variant="body">Body text</Typography>
<Typography variant="bodySmall">Small body text</Typography>

// Special variants
<Typography variant="caption">Caption text</Typography>
<Typography variant="overline">Overline text</Typography>

Variant Styling Examples

🎯 Variant Examples

Here's how different variants appear with their default styling:

const TypographyShowcase = () => {
  return (
    <View style={{ padding: 20 }}>
      <Typography variant="display">
        Display Text - Large, bold text for hero sections
      </Typography>

      <Typography variant="heading1">
        Heading 1 - Main page titles
      </Typography>

      <Typography variant="heading2">
        Heading 2 - Section headers
      </Typography>

      <Typography variant="heading3">
        Heading 3 - Subsection headers
      </Typography>

      <Typography variant="heading4">
        Heading 4 - Minor headers
      </Typography>

      <Typography variant="body">
        Body text - Regular content text with optimal readability
      </Typography>

      <Typography variant="bodySmall">
        Small body text - Secondary content or descriptions
      </Typography>

      <Typography variant="caption">
        Caption text - Small text for labels and metadata
      </Typography>

      <Typography variant="overline">
        OVERLINE TEXT - Uppercase labels and categories
      </Typography>
    </View>
  );
};

Typography Configuration

Setting Up Typography in StyleProvider

Configure typography settings in your StyleProvider:

import { StyleProvider, Styler } from '@mapples/style';

const App = () => {
  const styleConfig = Styler.init({
    typographyConfig: {
      fontFamily: 'System',
      color: 'theme.colors.text',
      default: 'body',
      typography: {
        display: {
          fontSize: 48,
          fontWeight: 'bold',
          lineHeight: 56,
        },
        heading1: {
          fontSize: 32,
          fontWeight: 'bold',
          lineHeight: 40,
        },
        heading2: {
          fontSize: 28,
          fontWeight: 'bold',
          lineHeight: 36,
        },
        heading3: {
          fontSize: 24,
          fontWeight: 'bold',
          lineHeight: 32,
        },
        heading4: {
          fontSize: 20,
          fontWeight: '600',
          lineHeight: 28,
        },
        body: {
          fontSize: 16,
          lineHeight: 24,
        },
        bodySmall: {
          fontSize: 14,
          lineHeight: 20,
        },
        caption: {
          fontSize: 12,
          lineHeight: 16,
        },
        overline: {
          fontSize: 10,
          fontWeight: 'bold',
          lineHeight: 16,
          textTransform: 'uppercase',
          letterSpacing: 1,
        },
      },
    },
  });

  return (
    <StyleProvider style={styleConfig}>
      <YourApp />
    </StyleProvider>
  );
};

Custom Typography Configuration

🎨 Custom Typography

Create custom typography configurations for your brand:

const customTypographyConfig = {
  fontFamily: 'Inter', // Custom font family
  color: 'theme.colors.text',
  default: 'body',
  typography: {
    // Brand-specific typography
    hero: {
      fontSize: 64,
      fontWeight: 'bold',
      lineHeight: 72,
      letterSpacing: -1,
    },
    title: {
      fontSize: 36,
      fontWeight: 'bold',
      lineHeight: 44,
    },
    subtitle: {
      fontSize: 24,
      fontWeight: '600',
      lineHeight: 32,
    },
    body: {
      fontSize: 16,
      lineHeight: 24,
      fontWeight: 'normal',
    },
    bodySmall: {
      fontSize: 14,
      lineHeight: 20,
      fontWeight: 'normal',
    },
    label: {
      fontSize: 12,
      fontWeight: 'bold',
      lineHeight: 16,
      textTransform: 'uppercase',
      letterSpacing: 0.5,
    },
    code: {
      fontSize: 14,
      fontFamily: 'Monaco',
      lineHeight: 20,
      backgroundColor: 'theme.colors.surface',
      padding: 'sizing.xs',
      borderRadius: 'sizing.xs',
    },
  },
};

Advanced Typography Features

Color Customization

🎨 Color Customization

Override colors for specific typography instances:

const ColoredTypography = () => {
  return (
    <View>
      <Typography variant="heading1" color="theme.colors.primary">
        Primary Color Heading
      </Typography>

      <Typography variant="body" color="theme.colors.textSecondary">
        Secondary Color Text
      </Typography>

      <Typography variant="caption" color="theme.colors.error">
        Error Color Caption
      </Typography>

      <Typography variant="overline" color="theme.colors.success">
        SUCCESS OVERLINE
      </Typography>
    </View>
  );
};

Responsive Typography

Typography automatically adapts to different screen sizes:

const ResponsiveTypography = () => {
  return (
    <View>
      <Typography variant="heading1">
        Responsive Heading
        {/* Automatically adjusts font size based on screen size */}
      </Typography>

      <Typography variant="body">
        This text will be smaller on mobile devices and larger on tablets and desktops.
      </Typography>
    </View>
  );
};

Typography with Styled Props

🎨 Styled Props

Use styled props for advanced typography customization:

import { useStyled } from '@mapples/style';

const CustomTypography = ({ styled }) => {
  const processedStyle = useStyled(styled);

  return (
    <Typography
      variant="body"
      styled={{
        style: {
          fontSize: 'sizing.lg',
          fontWeight: 'bold',
          color: 'theme.colors.primary',
          textAlign: 'center',
          marginBottom: 'sizing.md',
        },
        '&:mobile': {
          fontSize: 'sizing.md',
        },
      }}
    >
      Custom styled typography
    </Typography>
  );
};

Typography Best Practices

Consistent Usage

✅ Consistent Usage

Use typography variants consistently throughout your application:

const ArticleComponent = ({ title, subtitle, content, author, date }) => {
  return (
    <View>
      <Typography variant="heading1">{title}</Typography>
      <Typography variant="heading3" color="theme.colors.textSecondary">
        {subtitle}
      </Typography>
      <Typography variant="body">{content}</Typography>
      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
        <Typography variant="caption" color="theme.colors.textSecondary">
          By {author}
        </Typography>
        <Typography variant="caption" color="theme.colors.textSecondary">
          {date}
        </Typography>
      </View>
    </View>
  );
};

Accessibility Considerations

♿ Accessibility

Ensure your typography is accessible to all users:

const AccessibleTypography = () => {
  return (
    <View>
      <Typography
        variant="heading1"
        accessible={true}
        accessibilityRole="header"
        accessibilityLevel={1}
      >
        Main Heading
      </Typography>

      <Typography
        variant="body"
        accessible={true}
        accessibilityRole="text"
      >
        This text is accessible and will work well with screen readers.
      </Typography>

      <Typography
        variant="caption"
        accessible={true}
        accessibilityRole="text"
        accessibilityLabel="Additional information"
      >
        Important note
      </Typography>
    </View>
  );
};

Performance Optimization

Optimize typography performance for better app performance:

import React, { memo } from 'react';
import { Typography } from '@mapples/style';

// Memoize typography components for better performance
const MemoizedTypography = memo(({ variant, children, ...props }) => {
  return (
    <Typography variant={variant} {...props}>
      {children}
    </Typography>
  );
});

// Usage
<MemoizedTypography variant="body">
  This typography component is memoized for better performance.
</MemoizedTypography>

Typography Examples by Use Case

Article Layout

📰 Article Layout

Create article layouts with proper typography hierarchy:

const ArticleLayout = ({ article }) => {
  return (
    <View style={{ padding: 'sizing.lg' }}>
      <Typography variant="heading1">{article.title}</Typography>
      <Typography variant="bodySmall" color="theme.colors.textSecondary">
        {article.publishDate} • {article.readTime} min read
      </Typography>
      <Typography variant="heading3">{article.subtitle}</Typography>
      <Typography variant="body">{article.content}</Typography>
      <Typography variant="caption" color="theme.colors.textSecondary">
        Tags: {article.tags.join(', ')}
      </Typography>
    </View>
  );
};

Form Labels

📝 Form Labels

Use typography for consistent form labeling:

const FormField = ({ label, required, error, children }) => {
  return (
    <View>
      <Typography
        variant="bodySmall"
        color={error ? 'theme.colors.error' : 'theme.colors.text'}
      >
        {label} {required && '*'}
      </Typography>
      {children}
      {error && (
        <Typography variant="caption" color="theme.colors.error">
          {error}
        </Typography>
      )}
    </View>
  );
};

Card Content

Structure card content with appropriate typography:

const ProductCard = ({ product }) => {
  return (
    <View style={{ padding: 'sizing.md', backgroundColor: 'theme.colors.surface' }}>
      <Typography variant="heading4">{product.name}</Typography>
      <Typography variant="bodySmall" color="theme.colors.textSecondary">
        {product.category}
      </Typography>
      <Typography variant="body" color="theme.colors.primary">
        ${product.price}
      </Typography>
      <Typography variant="caption" color="theme.colors.textSecondary">
        {product.description}
      </Typography>
    </View>
  );
};

What's Next?

🎨 Styled Components

Learn how to create and use styled components like StyledView with styled props.

Styled Components →

📚 Usage Guide

Learn the basics of setting up and using Styler in your projects.

Basic Setup →

🍳 Cookbook

Explore advanced examples and patterns for custom components and styling.

Advanced Examples →