Typography

Learn how to style typography in your site using our predefined styles and Tailwind CSS utilities.

Headings

We provide consistent heading styles across the site. Here are the available heading styles:

Paragraphs and Text

Regular Paragraph

This is regular paragraph text, the standard type you’ll be reading throughout most of the Documentation and Blog sections of the site. It’s represented by the <p> element. It’s a nice place to put movie quotes, like, “I’m just one stomach flu away from my goal weight.”

Tables

This is how a table will render:

CSS and Tailwind Classes Applied to Table Elements

Lists

Unordered List

• First item in the list
• Second item in the list
• Third item in the list

Note: there is also the Checklist component:

• First item in the list
• Second item in the list
• Third item in the list

Ordered List

1. First item in the list
2. Second item in the list
3. Third item in the list

CSS and Tailwind Classes Applied to List Elements

Inline Text Styles

Blockquotes

This is a blockquote. Like, a quote from someone at Block.

Links

Links render like this: Click here to learn more.

Inline Code

This is how inline code will render:

console.log("My code is better than yours.");

Code Blocks

This is how code blocks will render:

console.log("Debugging in the console is old school");

public static void main(String... args){
  System.out.println("It's verbose but at least it's a real programming language");
}

fmt.Println("TBH I'm not sure this is how console logging works in Go but StackOverflow said it is")

Best Practices

1. Hierarchy

   • Use appropriate heading levels (h1-h6)
   • Maintain consistent spacing between elements
   • Use lead paragraphs for important sections

2. Readability

   • Keep line lengths comfortable (around 65-75 characters)
   • Use appropriate line height
   • Ensure sufficient contrast

3. Responsiveness

   • Use responsive font sizes
   • Adjust spacing on different screen sizes
   • Consider reading experience on all devices

4. Accessibility

   • Use semantic HTML elements
   • Maintain proper heading structure
   • Ensure sufficient color contrast
   • Consider users with screen readers

5. Dark Mode

   • Test all text styles in dark mode
   • Ensure proper contrast ratios
   • Use appropriate color variables