Skip to main content

Documentation Index

Fetch the complete documentation index at: https://synapsync.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

The NebuxTypography class provides a complete typography system with semantic text styles designed for different UI elements and content hierarchies.

​
Overview

NebuxTypography uses Google Fonts Montserrat by default and provides 10 semantic text styles, each optimized for specific use cases with appropriate font size, weight, line height, and letter spacing.

​
Text styles

All text styles include explicit height (line-height multiplier) and letterSpacing values aligned with Material Design 3 type scale:
​
heading
TextStyle
Style for main headings (e.g., page titles, primary headers)
  • Font size: 18px
  • Font weight: 600
  • Line height: 1.2
  • Letter spacing: -0.5
​
section
TextStyle
Style for section headers (e.g., content sections)
  • Font size: 14px
  • Font weight: 500
  • Line height: 1.25
  • Letter spacing: -0.25
​
content
TextStyle
Style for main content text (e.g., articles, descriptions)
  • Font size: 12px
  • Font weight: 400
  • Line height: 1.4
  • Letter spacing: 0.0
​
paragraph
TextStyle
Style for regular paragraph text (e.g., default content, paragraphs)
  • Font size: 14px
  • Font weight: 400
  • Line height: 1.5
  • Letter spacing: 0.15
​
caption
TextStyle
Style for small supporting text (e.g., captions, metadata)
  • Font size: 10px
  • Font weight: 400
  • Line height: 1.3
  • Letter spacing: 0.1
​
label
TextStyle
Style for small labels (e.g., timestamps, status)
  • Font size: 10px
  • Font weight: 500
  • Line height: 1.3
  • Letter spacing: 0.1
​
primaryAction
TextStyle
Style for primary action buttons
  • Font size: 14px
  • Font weight: 700
  • Line height: 1.2
  • Letter spacing: 0.5
​
secondaryAction
TextStyle
Style for secondary action buttons
  • Font size: 14px
  • Font weight: 600
  • Line height: 1.2
  • Letter spacing: 0.5
​
formInput
TextStyle
Style for form input text fields
  • Font size: 14px
  • Font weight: 400
  • Line height: 1.4
  • Letter spacing: 0.15
​
placeholder
TextStyle
Style for placeholder text in inputs
  • Font size: 14px
  • Font weight: 400
  • Font style: italic
  • Line height: 1.4
  • Letter spacing: 0.15

​
Standard typography

The standard() factory method creates a complete typography system using Google Fonts Montserrat: 
final typography = NebuxTypography.standard();

// Use in theme
final theme = NebuxTheme.createThemeData(
  isDark: false,
  colors: NebuxColors.standardLight(),
  fontSize: NebuxFontSize.standard(),
  typography: NebuxTypography.standard(),
);

​
Accessing typography

Use the BuildContext extension to access typography styles in your widgets: 
class TypographyExample extends StatelessWidget {
  const TypographyExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Page Title',
          style: context.nebuxTypography.heading,
        ),
        Text(
          'Section Header',
          style: context.nebuxTypography.section,
        ),
        Text(
          'This is content text for articles and descriptions.',
          style: context.nebuxTypography.content,
        ),
        Text(
          'This is paragraph text for default body content.',
          style: context.nebuxTypography.paragraph,
        ),
        Text(
          'Caption or metadata',
          style: context.nebuxTypography.caption,
        ),
        Text(
          'Label',
          style: context.nebuxTypography.label,
        ),
      ],
    );
  }
}

​
Real-world example

Here’s a complete example from the Nebux Design System showcase: 
class ExampleScreen extends StatelessWidget {
  const ExampleScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text('Typography Roles', style: context.nebuxTypography.heading),
            heightSpace8,
            Text('Section header', style: context.nebuxTypography.section),
            heightSpace4,
            Text(
              'Content text for articles and descriptions.',
              style: context.nebuxTypography.content,
            ),
            heightSpace4,
            Text(
              'Paragraph text for default body content.',
              style: context.nebuxTypography.paragraph,
            ),
            heightSpace4,
            Text('Caption / metadata', style: context.nebuxTypography.caption),
            heightSpace4,
            Text('Label text', style: context.nebuxTypography.label),
          ],
        ),
      ),
    );
  }
}
The spacing constants (heightSpace8, heightSpace4, etc.) are part of the Spacing system and provide consistent vertical spacing.

​
Custom typography

Create custom typography with a different font family: 
final customTypography = NebuxTypography.custom('Roboto', null);

// Use in theme
final theme = NebuxTheme.createThemeData(
  isDark: false,
  colors: NebuxColors.standardLight(),
  fontSize: NebuxFontSize.standard(),
  typography: NebuxTypography.custom('Roboto', null),
);

​
With package font

If your font is from a package, specify the package name: 
final packageTypography = NebuxTypography.custom(
  'CustomFont',
  'my_package',
);

​
Typography overrides

Override specific text styles while keeping others standard: 
final customTypography = NebuxTypography.withOverrides(
  heading: GoogleFonts.playfair(
    fontSize: 24,
    fontWeight: FontWeight.w700,
    height: 1.2,
    letterSpacing: -0.5,
  ),
  paragraph: GoogleFonts.roboto(
    fontSize: 16,
    fontWeight: FontWeight.w400,
    height: 1.6,
    letterSpacing: 0.15,
  ),
);
All other styles will use the standard values.

​
From Material theme

Create NebuxTypography from an existing Material ThemeData: 
final materialTheme = ThemeData.light();
final typography = NebuxTypography.fromThemeData(materialTheme);

​
Material mapping

Nebux typography roles map to Material TextTheme:
Nebux StyleMaterial TextThemeUse Case
headingheadlineMediumPage titles, primary headers
sectiontitleLargeSection headers
contentbodyLargeArticles, descriptions
paragraphbodyMediumDefault body text
captionbodySmallCaptions, metadata
labellabelLargeSmall labels, status
primaryActionlabelLarge (w700)Primary button text
secondaryActionlabelLarge (w600)Secondary button text
formInputbodyMediumInput field text
placeholderbodyMedium (italic)Placeholder text

​
Merging typography

Merge two typography schemes, with the second taking precedence: 
final baseTypography = NebuxTypography.standard();
final overrideTypography = NebuxTypography.withOverrides(
  heading: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
  ),
);

final mergedTypography = baseTypography.merge(overrideTypography);

​
Customizing text styles

All TextStyle objects can be customized using Flutter’s copyWith method: 
Text(
  'Custom Heading',
  style: context.nebuxTypography.heading.copyWith(
    color: context.nebuxColors.primary,
    fontSize: 24,
    fontWeight: FontWeight.w700,
  ),
)

​
Typography best practices

Use typography styles to establish clear content hierarchy:
  • heading: Page titles and primary headers
  • section: Section headers and subheadings
  • paragraph: Body text and paragraphs
  • content: Article content and descriptions
  • caption: Supporting text and metadata
  • label: Small labels and status indicators

​
Font size scale

NebuxTypography uses NebuxFontSize for consistent sizing:
Size NameValueUsed In
small10pxcaption, label
medium12pxcontent
large14pxparagraph, section, actions, forms
heading418pxheading
See the font size system for the complete scale from 8px to 36px.
When using Google Fonts in production, ensure fonts are properly cached or bundled with your app to avoid network requests and improve performance.