Typography

Style a component's typography properties

import { typography } from 'jynx'

The typography function gives you control of a component's typography styles, providing support for all typography-related properties including font-family, line-height and text-transform, etc.

Usage

To use the typography function, create a component using the TypographyProps type and include the function within it's style argument.

/* Import the function and its corresponding props type */
import { typography, TypographyProps } from 'jynx'


/* Then define a component with the type and include the 
 function within its style argument */
export const Component = styled.div<TypographyProps>`
    ${typography}
  `

/* Or using the legacy functional syntax */
export const Component = styled.div<TypographyProps>((props) => `
    ${typography}
  `)

Props

By default, when passing a string to any typography props, the raw css value is used. This means you can define typography styles however you normally would:

<Component fontFamily='Helvetica, sans-serif' />

For fontSize, fontWeight, letterSpacing and lineHeight, numeric values can also be passed.

when a property's corresponding scale is defined as an array, numbers between 0 and scale.length are used as an index
when a property has no corresponding scale, the original number is used
in all instances, numeric values are converted to a px string where necessary

Additionally, any standard named values (inherit, initial, etc) are available to use, and when using typescript, will show up as suggestions in your IDE.

Theming

You can also create scales for fonts, fontSizes, fontWeights, letterSpacings and lineHeights within your theme, which are then accessible in their respective border props (check which scale a props uses).

These can be defined as any valid scale type and the values will be shown as suggestions in your IDE.

/* Using a simple array-based scale */
export const theme = {
  fontSizes: [10, 12, 16, 24, 32, 48, 64, 72]
}

/* Using a simple object-based scale */
export const theme = {
  fonts: {
    primary: 'Helvetica, system-ui, serif',
    secondary: '"Times New Roman", Georgia, serif'
  }
}

Types

When working in typescript, use the TypographyProps interface to provide reliable type definitions for your components and value suggestions in your IDE.

interface TypographyProps {
  fontFamily?: StyleProp<CSS.Property.FontFamily | ThemeValue<'fonts'>>
  fontSize?: StyleProp<CSS.Property.FontSize<string | 0 | number> | ThemeValue<'fontSizes'>>
  fontStyle?: StyleProp<CSS.Property.FontStyle>
  fontWeight?: StyleProp<CSS.Property.FontWeight | ThemeValue<'fontWeights'> | number>
  letterSpacing?: StyleProp<CSS.Property.LetterSpacing<string | 0 | number> | ThemeValue<'letterSpacings'>>
  lineHeight?: StyleProp<CSS.Property.LineHeight<string | 0 | number> | ThemeValue<'lineHeights'>>
  textAlign?: StyleProp<CSS.Property.TextAlign>
  textDecoration?: StyleProp<CSS.Property.TextDecoration>
  textOverflow?: StyleProp<CSS.Property.TextOverflow>
  textTransform?: StyleProp<CSS.Property.TextTransform>
  whiteSpace?: StyleProp<CSS.Property.WhiteSpace>
  wordBreak?: StyleProp<CSS.Property.WordBreak>
}

API

The typography function allows for a number of props to be passed to your component from directly within your jsx / tsx. Select props also have shorthand aliases that can be used for a more concise syntax.

Prop	CSS Property	Theme Scale
fontFamily	font-family	fonts
fontSize	font-size	fontSizes
fontStyle	font-style
fontWeight	font-weight	fontWeights
letterSpacing	letter-spacing	letterSpacings
lineHeight	line-height	lineHeights
textAlign	text-align
textDecoration	text-decoration
textOverflow	text-overflow
textTransform	text-transform
whiteSpace	white-space
wordBreak	word-break

Examples

/* using plain CSS values */
<Component fontFamily='system-ui, sans-serif' />


/* with a theme scale defined */
/* `theme.fontSizes[3]` */
<Component fontSize={3} />

/* `theme.fonts.secondary` */
<Component fontFamily='secondary' />


/* based on a conditional */
<Component textDecoration={isAnchor ? 'underline' : 'inherit'} />


/* using responsive styles */
<Component letterSpacing={['0.25px', null, '0.625px']} />

<Component fontWeight={{ _: 300, md: 400 }} />


/* using responsive styles with theme scales */
<Component fontSize={[1, 2, null, 3]} />

<Component fontSize={{_: 1, sm: 2, xl: 3}} />