Typography

Considered use of typography presents content clearly and efficiently for every user.

This component is currently up for consideration to best align with Kuali's Typography Rudiments.

Usage

import { H1, H2, ...rest } from '../../ui/typography'

Font Family

We use Roboto. It's set as the font family for everything in kui. You can include it in your project, along with material icons, by inserting this snippet in the head of your index.html:

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,500%7CMaterial+Icons"
  rel="stylesheet"
/>

This will include regular and medium font weights. If you need more weights, add them next to 400,500 in the snippet above.

Type Scale

<H1>H1</H1>
<H2>H2</H2>
<H3>H3</H3>
<H4>H4</H4>
<H5>H5</H5>
<H6>H6</H6>
<Subtitle1>Subtitle 1</Subtitle1>
<Subtitle2>Subtitle 2</Subtitle2>
<Body1>Body 1</Body1>
<Body2>Body 2, Caption</Body2>

<H1>H1</H1>
<H2>H2</H2>
<H3>H3</H3>
<H4>H4</H4>
<H5>H5</H5>
<H6>H6</H6>
<Subtitle1>Subtitle 1</Subtitle1>
<Subtitle2>Subtitle 2</Subtitle2>
<Body1>Body 1</Body1>
<Body2>Body 2, Caption</Body2>

This type scale is intended to serve as a starting point for the typography in our applications, it is not intended to be exhaustive and we expect each team to define neccessary styles outside of this scale for their applications.

The use of the specified Body 1 style for the base font in all applications is key to the compatability of components working throughout the Kuali ecosystem of apps.

While our type scale only specifies the Regular and Medium styles to simplify, drive legibility and reduce font loading to Regular, Regular Italic, Medium and Medium Italic there may be situations where use of the other styles is appropriate.

Padding and Margin

Because adjusting padding and margin is so common and particular to each use case, we've provided shorthand props of p and m. You may still set padding and margin as specified in the next section if you prefer.

<H1 m="20px 0">H1 Text</H1>
<Subtitle1 p="50px">Subtitle1 Text</Subtitle1>

<H1 m="20px 0">H1 Text</H1>
<Subtitle1 p="50px">Subtitle1 Text</Subtitle1>

Overriding Styles + Additional Props

Each of these components is a styled-component underneath. This means that any props you pass in will be forwarded to the underlying DOM element. You can override styles either by using the style prop, or wrapping it with styled from styled-components. You may also override which DOM element we render (for accessibility and semantics) by using the as prop.

<H1 style={{ color: '#186704' }}>H1 Text</H1>

<H1 className='m-20'>H1 Text</H1>

import styled from 'styled-components'
const MyH1 = styled(H1)`
  padding: 50px;
`

<H6 as="p">I'm actually a p tag</H6>

Testing