IThemeFont | EF React Native Style Framework

The font aliases that can be used to apply classes to React Native <Text> components

example: Using the mixins ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const title: TextStyle = { ...theme.font.title, }; const subTitle: TextStyle = { ...theme.font.subTitle, }; const primary: TextStyle = { ...theme.font.primary, }; const secondary: TextStyle = { ...theme.font.secondary, }; const accemt: TextStyle = { ...theme.font.accemt, }; ```

Type parameters

Hierarchy

IFont
- IThemeFont

Implemented by

ThemeFont

Index

Properties

accent

accent: T

The accent colour often has the same style as the primary text but has an inverted colour that sits on the base background colour.

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const hero: TextStyle = { ...theme.font.accent, }; ```
see: ThemeFont

code

code: T

The code alias provide a font that often monospaced and designed to be used when source code is to be displayed. This is the equivalent of the <code> HTML tag

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const hero: TextStyle = { ...theme.font.code, }; ```
see: ThemeFont

family

family: IFamily

The name of the font family as a numeric string. Has the IFontFamily aliases available

example: Using the values ```ts import { TextStyle } from 'react-native'; import { font } from '@Ef-carbon/react-native-style'; const style: TextStyle = { fontFamily: font.family.normal, }; ```

heading

heading: T

An alias for heading that is often used after a title but as a parent to a section

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const hero: TextStyle = { ...theme.font.heading, }; ```
see: ThemeFont

hero

hero: T

Provides an alias for some hero text which is often that largest and most attention grabbing type of text in an application.

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const hero: TextStyle = { ...theme.font.hero, }; ```
see: ThemeFont

letterSpacing

letterSpacing: number

The spacing of the font letters as a numeric value.

example: Using the value ```ts import { TextStyle } from 'react-native'; import { font } from '@Ef-carbon/react-native-style'; const style: TextStyle = { letterSpacing: font.letterSpacing, }; ```
see: {@link fontLetterSpacing}

lineHeight

lineHeight: number

The line height multiple for a font. React Native line height is absolute, so the font size must be used to determine the actual line height

example: Using the value ```ts import { TextStyle } from 'react-native'; import { font } from '@Ef-carbon/react-native-style'; const style: TextStyle = { lineHeight: font.lineHeight }; ```
see: {@link fontLineHeight}

primary

primary: T

The primary text that is used in the application. This should be applied to all <Text> elements that are not another aliases.

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const hero: TextStyle = { ...theme.font.primary, }; ```
see: ThemeFont

quote

quote: T

When quotations are to be display to the user, this alias should be used. This is the equivalent of the <quote> HTML tag

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const hero: TextStyle = { ...theme.font.quote, }; ```
see: ThemeFont

secondary

secondary: T

The secondary text has the base colour of the theme and can be used to provide attention grabbing text. It is usually the same style as the primary font, just uses the base colour.

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const hero: TextStyle = { ...theme.font.primary, }; ```
see: ThemeFont

section

section: T

A section is the smallest heading type alias, it usually comes after a heading alias.

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const hero: TextStyle = { ...theme.font.section, }; ```
see: ThemeFont

size

size: ISize

The size of the font as a numeric value. Has the ILength aliases available

example: Using the values ```ts import { TextStyle } from 'react-native'; import { font } from '@Ef-carbon/react-native-style'; const style: TextStyle = { fontSize: font.size.normal, }; ```
see: IFontSize

subHeading

subHeading: T

Provides a class of text that can be paired with the heading alias as a sub-title. It is usually slightly smaller and less attention grabbing than the parent alias.

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const hero: TextStyle = { ...theme.font.subHeading, }; ```
see: ThemeFont

subHero

subHero: T

Provides a class of text that can be paired with the hero alias as a sub-title. It is usually slightly smaller and less attention grabbing than the parent alias.

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const hero: TextStyle = { ...theme.font.subHero, }; ```
see: ThemeFont

subSection

subSection: T

Provides a class of text that can be paired with the section alias as a sub-title. It is usually slightly smaller and less attention grabbing than the parent alias.

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const hero: TextStyle = { ...theme.font.subSection, }; ```
see: ThemeFont

subTitle

subTitle: T

Provides a class of text that can be paired with the title alias as a sub-title. It is usually slightly smaller and less attention grabbing than the parent alias.

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const hero: TextStyle = { ...theme.font.subTitle, }; ```
see: ThemeFont

tertiary

tertiary: T

The tertiary colour often has the same style as the primary text but has an inverted colour that sits on the complimentary base background colour.

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const hero: TextStyle = { ...theme.font.tertiary, }; ```
see: ThemeFont

title

title: T

Provides an alias for a title which is often a large piece of text which is often used at the top of a document.

example: Using the mixin ```ts import { TextStyle } from 'react-native'; import { Theme } from '@ef-carbon/react-native-style'; const theme = new Theme(); const hero: TextStyle = { ...theme.font.title, }; ```
see: ThemeFont

weight

weight: IWeight

The weight of the font as a numeric value. Has the IFontWeight aliases available

example: Using the values ```ts import { TextStyle } from 'react-native'; import { font } from '@Ef-carbon/react-native-style'; const style: TextStyle = { fontWeight: font.weight.normal, }; ```