Typography

Easily change the size, weight, and other font properties of text using Astral.CSS to enhance your web design and improve readability.

Headers

We provide some basic styling on header tags. In the example, you can see the the 6 header tags' different sizes.

this is an H1 heading

this is an H2 heading

this is an H3 heading

this is an H4 heading

this is an H5 heading
this is an H6 heading
this is an H1 heading


this is an H2 heading


this is an H3 heading


this is an H4 heading


this is an H5 heading


this is an H6 heading

Blockquote

Blockquotes are mainly used to give emphasis to a quote or citation. You can also use these for some extra text hierarchy and emphasis.

The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.

- Bill Gates 

  
The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. 

  - Bill Gates

Text level semantics

  • The a element example
  • The abbr element and abbr element with title examples
  • The b element example
  • The cite element example
  • The code element example
  • The del element example
  • The dfn element and dfn element with title examples
  • The em element example
  • The i element example
  • The ins element example
  • The kbd element example
  • The mark element example
  • The q element inside a q element example
  • The s element example
  • The samp element example
  • The small element example
  • The span element example
  • The strong element example
  • The sub element example
  • The sup element example
  • The u element example
  • The var element example


    
  
  • The a element example
    • 
  
  • The abbr element and abbr element with title
      examples
    • 
  
  • The b element example
    • 
  
  • The cite element example
    • 
  
  • The code element example
    • 
  
  • The del element example
    • 
  
  • The dfn element and dfn element with title examples
  
    • 
  
  • The em element example
    • 
  
  • The i element example
    • 
  
  • The ins element example
    • 
  
  • The kbd element example
    • 
  
  • The mark element example
    • 
  
  • The q element inside a q element example
    • 
  
  • The s element example
    • 
  
  • The samp element example
    • 
  
  • The small element example
    • 
  
  • The span element example
    • 
  
  • The strong element example
    • 
  
  • The sub element example
    • 
  
  • The sup element example
    • 
  
  • The u element example
    • 
  
  • The var element example
    •

Address

The address element.
John Doe
somewhere, world 

  The address element.

  John Doe

  somewhere, world

Audio

Figure

Photo of a woman with a camera
Figcaption caption

  Photo of a woman with a camera
  
Figcaption caption

Lists

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.
    
  
  • This is a list.
    • 
  
  • It appears completely unstyled.
    • 
  
  • Structurally, it's still a list.
    • 
  
  • However, this style only applies to immediate child elements.
    • 
  
  • Nested lists:
    
      
      
    • are unaffected by this style
      • 
      
    • will still show a bullet
      • 
      
    • and have appropriate left margin
      • 
    
    
  
    • 
  
  • This may still come in handy in some situations.
    •

Display heading

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Display 1


Display 2


Display 3


Display 4


Display 5


Display 6

Lead Text

Make a paragraph stand out by adding .lead.

This is a lead paragraph. It stands out from regular paragraphs. 

This is a lead paragraph. It stands out from regular paragraphs.