Typography

Typography is the way to represent your content as much as clear as possible with the help of certain uniform rules.

Introduction

While typography is much easier to state but it is sometimes complicated to follow along. Establishing a good and clear typography is two way process, first your designs should be clear and well visible, second how we have implemented those design in our code with the rules which we define based on the designs.

We are mostly going to talk how we can work on the later part, i.e defining the rules which can be extended and uniformly applied to all of our content. The first step is to differentiate various content types, like what is heading, text and link and how they are used together. The next step is to draw the common styling analogy, like what are the typographies which are using same font-family. In next step we create a grouping of these common styling and name them appropriately for example

• Typography primary for main text like heading, texts

• Typography secondary for auxiliaries like font inside button

• Typography code for code snippets

We can continue the list as per our design, but the main concept is every code snippet should use the code typography, same for others as well. This is encouraged to not mix styled-components with naked <p> tags.

Don't worry if this doesn't make much sense right now, the key concept is we use a named property for classifying different texts in our app.

Typography in Axis is provided via three Components:

• Heading

• Text

• Link

API Reference

In order to use our styled-components, Axis uses the same theme properties across all kind of typographical components. We will need to extend our theme, prior to using the components, something like this:

customTheme.js

const fontSize = {
	xxl: '2.5rem',
	xl: '2rem',
	xlg: '1.8rem',
	lg: '1.6rem',
	md: '1.4rem',
	sm: '1.2rem',
	xsm: '1rem',
	xs: '0.8rem',
	xxs: '0.7rem'
}

const fontWeight = {
  light: 300,
  normal: 400,
	bold: 500,
	bolder: 700
}

const lineHeight = {
  comfort: '1.6em',
  cozy: '1.4em',
  compact: '1em',
}

const letterSpacing = {
	comfort: '1.6em',
  cozy: '1.4em',
  compact: '1em',
}

const fonts = {
	primaryFont: 'Avenir, sans-serif',
	secondaryFont: 'open sans'
}

const typography = {
	heading: {
		fontFamily: fonts.primaryFont,
		fontSize: fontSize.lg,
		fontWeight: fontWeight.normal,
		lineHeight: 1.2
	},
	primary: {
		fontFamily: fonts.primaryFont,
		fontSize: fontSize.xsm,
		fontWeight: fontWeight.normal,
		lineHeight: 1.2
	},
}


// ...other properties

export default Object.freeze({
// ...other properties
	fontSize,
  fontWeight,
	lineHeight,
	letterSpacing,
	typography,
})

Please make sure to export fontSize,fontWeight,lineHeight,letterSpacing and typography from your theme file, all of these properties are later used inside components to ensure uniformity.

Please make sure to use the same key, heading and primaryin your typography, Heading and Text uses them as defaultProps.

We are going to use the above file for explaining our components