@react-md/typography

This package is used to include typography into your application. There are 13 different font styles included with reasonable defaults, but they can also easily be updated with custom values.

This package is mostly for generating the base typography onto different classes throughout your app, but it also exposes Typography and TextContainer components to help add typography throughout your app. There is also an accessibility helper component named SrOnly that allows you to display text to screen readers only.

If you'd like to change the typography values, check out the SassDoc page on the documentation site.

Installation

npm install --save @react-md/typography

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

import { render } from "react-dom";
import { Typography, TextContainer } from "@react-md/typography";

const App = () => (
  <TextContainer>
    <Typography type="headline-1">Headline 1</Typography>
    <Typography type="headline-2">Headline 2</Typography>
    <Typography type="headline-3">Headline 3</Typography>
    <Typography type="headline-4">Headline 4</Typography>
    <Typography type="headline-5">Headline 5</Typography>
    <Typography type="headline-6">Headline 6</Typography>
    <Typography type="subtitle-1">Subtitle 1</Typography>
    <Typography type="subtitle-2">Subtitle 2</Typography>
    <Typography type="body-1">Body 1</Typography>
    <Typography type="body-2">Body 2</Typography>
    <Typography type="overline">Overline</Typography>
    <Typography type="caption" component="p">
      Caption
    </Typography>
  </TextContainer>
);

render(<App />, document.getElementById("root"));

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

5.1.6 (2023-12-11)

Note: Version bump only for package @react-md/typography

5.1.3 (2022-05-07)

Documentation

• fix typos throughout codebase (725d1a2)

Other Internal Changes

• typos: fix additional typos throughout repo (ef20132)

5.1.2 (2022-04-02)

Note: Version bump only for package @react-md/typography

5.1.0 (2022-03-18)

Other Internal Changes

• run lint-scripts --fix for consistent-type-imports (42d839d)

5.0.0 (2022-01-31)

Bug Fixes

• @react-md/typography: Fixed overline class name (1e544d0)

4.0.3 (2021-12-31)

Other Internal Changes

• Updated all packages' peerDependenciesMeta (60fcd71), closes #1319

4.0.1 (2021-11-27)

Other Internal Changes

• Updated imports to use import type when possible (ba96bb6)

4.0.0 (2021-11-24)

Bug Fixes

• sass: Do not use legacy global functions (6159e16)

Features

• Update to use new JSX Transform and latest eslint (8111cd3)
• @react-md/typography: Renamed Text to Typography (30cf056)

Other Internal Changes

• always skip lib check (229cef1)
• @react-md/format: ran prettier after upgrading to v2.4.0 (06110af)
• react-md: Remove prop-types package and usage (2637a6f)
• stylelint: Updated to use stylelint (22d1598)

Breaking Changes

• Minimum React version is now 16.14 instead of 16.8
• @react-md/typography: The Text component has been renamed to Typography to help with auto-imports conflicting with the Text element that exists in lib.d.ts
• react-md: There will no longer be run-time prop validation with the prop-types package.

3.1.0 (2021-09-10)

Features

• @react-md/typography: override default typography without globals (ce89374), closes #1239

Documentation

• react-md.dev: updated sassdoc for new module system (4746d26)

Other Internal Changes

• ran yarn format to include new files (48d3d7f)

3.0.0 (2021-08-13)

Bug Fixes

• sass: use math.div instead of division since it's deprecated (d8c3f12)

Other Internal Changes

• Added additional tests to bump test coverage (4d0371c)
• @react-md/dev-utils: updated sassdoc and variables to use everything.scss (a0f0699)
• @react-md/dev-utils: updated variables command to work with sass (5376be1)

2.9.1 (2021-07-27)

Other Internal Changes

• install: slighly reduce install size by excluding tests in publish (9d01a44)

2.9.0 (2021-07-18)

Note: Version bump only for package @react-md/typography

2.8.4 (2021-06-10)

Note: Version bump only for package @react-md/typography

2.8.3 (2021-05-18)

Documentation

• @react-md/typography: Added examples for overriding typography styles (57033bd), closes #1147
• react-md.dev: updated tsdoc to work with typedoc (cf54c35)

2.8.2 (2021-04-23)

Note: Version bump only for package @react-md/typography

2.8.0 (2021-04-22)

Other Internal Changes

• tsconfig: separate tsconfig by package instead of a single root (b278230)

2.7.1 (2021-03-23)

Note: Version bump only for package @react-md/typography

2.7.0 (2021-02-28)

Documentation

• tsdoc: fixed remaining tsdoc syntax warnings (946f4dd)

Other Internal Changes

• updated test coverage to not include conditional component PropTypes (24e5df1)

2.6.0 (2021-02-13)

Note: Version bump only for package @react-md/typography

2.5.5 (2021-01-30)

Note: Version bump only for package @react-md/typography

2.5.4 (2021-01-27)

Note: Version bump only for package @react-md/typography

2.5.0 (2020-12-15)

Note: Version bump only for package @react-md/typography

2.4.2 (2020-10-23)

Note: Version bump only for package @react-md/typography

2.4.1 (2020-10-17)

Note: Version bump only for package @react-md/typography

2.4.0 (2020-10-17)

Features

• @react-md/theme: Better Contrast Colors by Default and dev-utils refactor (#955) (519b128)

2.3.1 (2020-09-15)

Note: Version bump only for package @react-md/typography

2.3.0 (2020-09-10)

Note: Version bump only for package @react-md/typography

2.2.2 (2020-09-02)

Note: Version bump only for package @react-md/typography

2.2.1 (2020-09-02)

Note: Version bump only for package @react-md/typography

2.1.2 (2020-08-01)

Note: Version bump only for package @react-md/typography

2.1.1 (2020-07-21)

Note: Version bump only for package @react-md/typography

2.1.0 (2020-07-12)

Note: Version bump only for package @react-md/typography

2.0.2 (2020-06-30)

Bug Fixes

• LICENSE: Removed the time range from license since it was incorrect (50c9021)
• Added sideEffects field to package.json (31820b9)
• sideEffects formatting (78a7b6b)

v2.0.1

No changes.

v2.0.0

The typography package is kind of new for the v2 release since there weren't any components beforehand for typography. This package exports three components: Text, TextContainer, and SrOnly. The Text component can be used to render any of the typography styles. The TextContainer component is used to create a centered block of text that uses the recommended line-width for legibility on different device sizes. Finally, the SrOnly component allows for text to only be visible to screen readers.

In addition, the naming for the different typography styles have been renamed for the updated Material Design guidelines for typography.

All the default typography styles can be configured by declaring global variables that will be merged with the recommended values:

• $rmd-typography-headline-1
• $rmd-typography-headline-2
• $rmd-typography-headline-3
• $rmd-typography-headline-4
• $rmd-typography-headline-5
• $rmd-typography-headline-6
• $rmd-typography-subtitle-1
• $rmd-typography-subtitle-2
• $rmd-typography-body-1
• $rmd-typography-body-2
• $rmd-typography-button
• $rmd-typography-caption
• $rmd-typography-overline

New Behavior and Features

• typography will never modify the default tags by default
• all typography styles are configurable in a SCSS Map
• persistent typography across all device sizes
• switched from px to rem and em for typography
• removed the default transition-timing-function that was applied to all elements and pseudo elements
• removed the default min-width and font-size on the html
• added a simpler "css reset" for the html and body that is in the @react-md/utils package now

Breaking Changes

• removed the react-md-typography-utilities mixin
• removed all the SCSS placeholders
• every SCSS variable, function, and mixin has been renamed or removed

New SCSS Variables, Functions, and Mixins

• $rmd-typography-text-container-breakpoint: 37.5rem !default - breakpoint to use for switching the typography max line-length from mobile to desktop
• $rmd-typography-font-weights - a map of all the available font weights which can be overridden
• $rmd-typography-default-font-weights: light regular medium bold !default all the default available font weights
• $rmd-typography-thin: 100 default - the thin font weight value
• $rmd-typography-black: 900 !default - the darkest font weight value
• @function rmd-typography-theme - gets one of the theme values and validates that the theme name is valid
• @function rmd-typography-theme-var - gets one of the theme values as a css variable with a fallback value and validates that the theme name is valid
• @function rmd-typography-value - most likely mostly internal, but allows you to get one of the typography values based on the type
• @mixin rmd-typography-theme - applies one of the theme values to a css property as a css variable
• @mixin rmd-typography-theme-update-var - updates one of the theme values as a css variable
• @mixin rmd-typography-value - applies the specifified typography type to an element with an optional list of properties to use
• @mixin rmd-typography-base - applies the base typography to an element
• @mixin rmd-typography - the inverse of rmd-typography-value that will default to apply all styles to an element
• @mixin rmd-text-container-base - the default styles for creating a text container
• @mixin rmd-text-container-auto- generally used with the rmd-text-container-base mixin to automatically update the max line-width based on media size
• @mixin rmd-text-overflow-ellispis - updates a class name or selector so that long text will be overflown with an ellipsis

Renamed SCSS Variables, Functions, and Mixins

• $md-font-family was renamed to $rmd-typography-font-family but keeps the same default value of Roboto, sans-serif
• $md-typography-max-line-length was renamed and split into $rmd-typography-mobile-max-line-length and $rmd-typography-desktop-max-line-length with defaults of 17em and 40em respectively
• $md-font-light was renamed to $rmd-typography-light
• $md-font-regular was renamed to $rmd-typography-regular
• $md-font-medium was renamed to $rmd-typography-medium
• $md-font-bold was renamed to $rmd-typography-bold
• $md-font-semibold was renamed to $rmd-typography-semi-bold and changed the default value from 600 to 800
• host-google-font was renamed to rmd-typography-host-google-font
• host-material-icons was renamed to rmd-icon-host-google-icons but is now part of the @react-md/icon package

Removed SCSS Variables and Mixins

• removed $md-typography-extended since global namespace is no longer touched
• removed $md-typography-include-text-container since it is always created now for the TextContainer component
• removed $md-typography-include-utilities since there are no longer any utilities
• removed the $md-font-name variable
• removed the $md-html-min-width variable
• removed all the old typography variables for the new naming conventions:
  • $md-display-4-font-size
  • $md-display-4-line-height
  • $md-display-3-font-size
  • $md-display-3-line-height
  • $md-display-2-font-size
  • $md-display-2-line-height
  • $md-display-1-font-size
  • $md-display-1-line-height
  • $md-headline-font-size
  • $md-headline-line-height
  • $md-title-font-size
  • $md-title-line-height
  • $md-subheading-mobile-font-size
  • $md-subheading-desktop-font-size:
  • $md-subheading-2-line-height
  • $md-subheading-1-line-height
  • $md-body-mobile-font-size
  • $md-body-desktop-font-size
  • $md-body-2-line-height
  • $md-body-1-line-height
  • $md-caption-font-size
• removed $md-font-size-base and $md-line-height variables
• removed the react-md-typography-mobile, react-md-typography-desktop, and react-md-typography-media mixins since the typography no longer changes based on device size
• removed the react-md-theme-typography mixin