Typography

Read before use

Entur's official font is Nationale and is created by Playtype Foundry, located in Copenhagen. The font is protected under licence and shall only be used in official Entur products. By downloading this font you confirm that you are employed by Entur and that the font only will be used in developing official Entur products. All other uses will be regarded as a violation to the licence agreement and to Entur's brand, and legal actions may be filed.

This package contains styles and React components for all of our typography.

💡 Looking for the documentation? Looking for the beta documentation?

Installation

npm install @entur/typography
# or
yarn add @entur/typography

🚀 Quick Start

Using Stable Typography (Recommended for Production)

import { Heading1, Paragraph, Link } from '@entur/typography';
import '@entur/typography/styles';

function MyComponent() {
  return (
    <div>
      <Heading1>My Title</Heading1>
      <Paragraph>My content</Paragraph>
      <Link href="/more">Learn more</Link>
    </div>
  );
}

Using Beta Typography (Experimental Features)

import { Heading, Text, Link } from '@entur/typography/beta';
import '@entur/typography/styles';
import '@entur/typography/beta/styles';

function MyComponent() {
  return (
    <div>
      <Heading as="h1" variant="title-1">
        My Title
      </Heading>
      <Text variant="paragraph">My content</Text>
      <Link href="/more">Learn more</Link>
    </div>
  );
}

🔄 Migration

Good news! This package maintains full backward compatibility. All existing import patterns continue to work exactly as before.

Backward Compatibility

// ✅ All these still work exactly as before
import { Heading1 } from '@entur/typography/dist/Heading1';
import { Paragraph } from '@entur/typography/dist/Paragraph';
import '@entur/typography/dist/styles.css';

Modern Imports (Recommended)

// 🚀 But these are now preferred
import { Heading1, Paragraph } from '@entur/typography';
import '@entur/typography/styles';

Migrating to the new typography

Use the migrate-typography skill with your AI coding agent. It covers the old components (Heading1–6, Paragraph …), the beta changes and the layout beta spacing scale.

Update Styles

// Replace this
@import '@entur/typography/dist/styles.css';

// With this
@import '@entur/typography/styles';

🎨 Features

Beta Typography

• Semantic variants - Title, subtitle, section, paragraph, etc.
• Size variants - Extra large, large, medium, small, extra small
• Weight variants - Medium and bold
• No margins by default - Text sits flush wherever you place it
• Spacing - spacing="m" or spacing={{ top: 's', bottom: 'xl' }}, on the same scale as gap in @entur/layout/beta
• TextContainer - Wrap running text to get the rhythm between headings, paragraphs and lists
• Accessibility - Built-in ARIA support and semantic HTML

Legacy Typography

• Individual components - Heading1-6, Paragraph, Link, etc.
• Simple API - Easy to use with minimal configuration
• Backward compatibility - Existing code continues to work

Licenses

• Source code is licensed under European Union Public License, version 1.2 (EUPL-1.2)
• The fonts are licensed separately, and all use should follow its licence.