Menu California Design System

Typography

Typography refers to the art and technique of arranging and designing type, which includes selecting typefaces, arranging typefaces, and organizing them in a visually pleasing and effective manner. It involves the creation and arrangement of letters, numbers, icons, and other characters to form written communication, whether in print or digital form.

testing out the spacing with this paragraph addition

Elements

Typography encompasses various elements such as typefaces, fonts, point sizes, line spacing, letter spacing, and alignment. These elements are used to create hierarchy, readability, and aesthetic appeal in written communication. Typography plays a crucial role in enhancing the readability and legibility of text, conveying meaning and tone, and evoking emotions.

Typefaces

Typefaces, also known as fonts, are designed sets of characters with consistent visual characteristics. They can range from traditional serif typefaces to more modern sans-serif or decorative typefaces. Each typeface has its own personality and conveys a different mood or message. Typeface selection is an important aspect of typography as it helps establish the overall tone and visual style of the text.

Usage

Typography is utilized in various mediums such as books, magazines, newspapers, posters, websites, advertisements, user interfaces, and more. It involves careful consideration of factors like readability, legibility, alignment, spacing, and contrast to ensure that the text is clear, engaging, and visually appealing to the intended audience.

Overall, typography is a powerful design tool that combines artistic creativity with practical functionality to effectively communicate through written language.


Text size examples

Below you'll find our text sizes starting with headings...this is some text as to why we came up with these sizes.

Heading styles

Heading 1

H1 text size is 3.375rem.

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

List

  • "I'm not asking Ron for anything," Harry said flatly.
  • He was sitting right next to Albus Dumbledore.

Blockquote

Harry looked down at his own wand. He could see finger marks all over it. He gathered a fistful of robe from his knee and tried to rub it clean surreptitiously. Several gold sparks shot out of the end of it. Fleur Delacour gave him a very patronizing look, and he desisted.

— Jon Jensen, Jon's Unwritten Book

Links and buttons

This is a link. and this is a

Small text

A tiny footnote.