Working with Typography Components
1. Using IonText Component
| Property | Values | Description |
|---|---|---|
| color | primary, secondary, tertiary, success, warning, danger, light, medium, dark |
Sets the text color using Ionic's color palette |
| size | small, medium, large |
Adjusts the font size of the text |
| wrap | true, false |
Controls whether the text wraps to the next line |
Example: Basic Usage of IonText
<ion-text color="primary">
<p>This is a primary colored text.</p>
</ion-text>2. Applying Text Colors
| Property | Values | Description |
|---|---|---|
| color | primary, secondary, tertiary, success, warning, danger, light, medium, dark |
Applies a predefined color from Ionic's palette |
| color | red, green, blue, orange, purple |
Applies a custom color using CSS variables or hex values |
Example: Using Predefined Colors
<ion-text color="primary">
<p>This text is primary colored.</p>
</ion-text>
<ion-text color="success">
<p>This text is success colored.</p>
</ion-text>Example: Using Custom Colors
<ion-text color="red">
<p>This text is red.</p>
</ion-text>
<ion-text style="color: #007bff">
<p>This text is blue.</p>
</ion-text>3. Using Heading Elements
| Element | Description | Attributes | Example |
|---|---|---|---|
| <ion-title> | Used for main titles in headers | size, color |
<ion-title size="large">Main Title</ion-title> |
| <ion-subtitle> | Used for subtitles or secondary titles | size, color |
<ion-subtitle size="medium">Subtitle Text</ion-subtitle> |
| <h1> to <h6> | Standard HTML heading elements | class, id |
<h1>Heading 1</h1> |
Example: Heading Hierarchy
<ion-header>
<ion-toolbar>
<ion-title>App Title</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<p>Content here.</p>
</ion-content>
Note: Use semantic HTML headings for accessibility and SEO.
4. Implementing Text Wrapping
| Property | Values | Description |
|---|---|---|
| text-wrap | wrap | nowrap | balance |
Controls how text wraps within a component. wrap allows line breaks, nowrap prevents wrapping, balance balances line lengths. |
| text-overflow | ellipsis | clip |
Determines how to handle overflowed text. ellipsis shows an ellipsis (...), clip hides overflowed text. |
Example: Using text-wrap and text-overflow
<ion-text wrap="true" overflow="ellipsis">
This is a long text that will wrap or truncate based on the properties.
</ion-text>
Note: The
text-wrap and text-overflow properties are part of Ionic's typography system and can be applied to any text component or container.
5. Using Text Alignment
| Property | Values | Description |
|---|---|---|
| text-align | left, center, right, justify |
Aligns text content within a component |
Example: Aligning Text in Ionic Components
<ion-text align="left">
<p>This text is aligned to the left.</p>
</ion-text>
<ion-text align="center">
<p>This text is centered.</p>
</ion-text>
<ion-text align="right">
<p>This text is aligned to the right.</p>
</ion-text>
Note: The
align property works on <ion-text> and other text-based Ionic components to control horizontal alignment.
6. Applying Text Transform
| Property | Values | Description |
|---|---|---|
| textTransform | none, uppercase, lowercase, capitalize |
Applies text transformation to the component's content. |
Example: Applying Uppercase Text Transform
<ion-text textTransform="uppercase">
<h1>Hello World</h1>
</ion-text>Example: Applying Lowercase Text Transform
<ion-text textTransform="lowercase">
<p>HELLO WORLD</p>
</ion-text>7. Using Font Utilities
| Utility | Description | Usage |
|---|---|---|
| .font-bold | Makes text bold | <h1 class="font-bold">Bold Heading</h1> |
| .font-italic | Makes text italic | <p class="font-italic">Italic paragraph</p> |
| .text-uppercase | Converts text to uppercase | <span class="text-uppercase">UPPERCASE TEXT</span> |
| .text-lowercase | Converts text to lowercase | <span class="text-lowercase">lowercase text</span> |
| .text-capitalize | Capitalizes first letter of each word | <h3 class="text-capitalize">hello world</h3> |
| .text-center | Centers text alignment | <div class="text-center">Centered text</div> |
| .text-left | Aligns text to the left | <div class="text-left">Left aligned text</div> |
| .text-right | Aligns text to the right | <div class="text-right">Right aligned text</div> |
| .text-underline | Underlines text | <span class="text-underline">Underlined</span> |
| .text-line-through | Strikes through text | <span class="text-line-through">Strikethrough</span> |
Example: Applying Font Utilities
<div class="text-center">
<h1 class="font-bold text-uppercase">Welcome to Ionic</h1>
<p class="font-italic text-lowercase">This is an example paragraph.</p>
</div>8. Implementing Truncation
Example: Truncating Text with Ellipsis
<ion-text>
<h2 class="truncate">This is a very long title that will be truncated with an ellipsis</h2>
</ion-text>| Property | Values | Description |
|---|---|---|
| truncate | true |
Applies ellipsis truncation to the text content |
| lines | 1, 2, 3 |
Number of lines to display before truncation |
Note: The
truncate property works best with single-line or multi-line text elements that support CSS text-overflow: ellipsis.
Warning: Truncation is not supported in all browsers. Ensure fallback behavior for unsupported environments.
9. Using Custom Fonts
| Property | Values | Description |
|---|---|---|
| font-family | 'CustomFont', 'Arial', sans-serif |
Specifies the custom font to use. Fallbacks ensure compatibility. |
| font-weight | normal, bold, 100–900 |
Sets the weight of the custom font. Defaults to normal. |
| font-style | normal, italic |
Applies italic styling to the font if supported. |
Example: Applying a Custom Font in Ionic
.custom-font {
font-family: 'Roboto', 'Helvetica Neue', sans-serif;
font-weight: 400;
font-style: normal;
}Example: Using CSS Custom Properties for Fonts
:root {
--font-primary: 'Open Sans', Arial, sans-serif;
--font-secondary: 'Lato', 'Helvetica Neue', sans-serif;
}
.title {
font-family: var(--font-primary);
font-weight: 700;
}
Note: Ensure custom fonts are properly loaded via
@font-face or external CDN to avoid FOIT (Flash of Invisible Text).
Warning: Avoid loading too many font variants as it can increase bundle size and impact performance.
10. Configuring Typography Variables
| Variable | Default Value | Description |
|---|---|---|
| --ion-font-family | 'Inter', 'Roboto', 'Noto Sans', sans-serif |
Base font family for all text elements |
| --ion-font-size-base | 16px |
Base font size for body text |
| --ion-font-size-h1 | 24px |
Font size for H1 headings |
| --ion-font-size-h2 | 20px |
Font size for H2 headings |
| --ion-font-size-h3 | 18px |
Font size for H3 headings |
| --ion-font-weight-bold | 700 |
Font weight for bold text |
| --ion-font-weight-semibold | 600 |
Font weight for semi-bold text |
| --ion-font-weight-regular | 400 |
Font weight for regular text |
Example: Customizing Typography Variables
$ion-font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
$ion-font-size-base: 18px;
$ion-font-size-h1: 28px;
$ion-font-size-h2: 24px;
// Apply to Ionic components
ion-title {
font-family: var(--ion-font-family);
font-size: var(--ion-font-size-h1);
}
Note: These variables are defined in Ionic's global SCSS files and can be overridden in your project's main SCSS file.