--- url: https://bullframecss.marcopontili.com/typography.md --- # Typography Bullframe CSS provides semantic typography styles for all HTML elements out of the box. ## Headings All heading levels (`h1` through `h6`) are styled with appropriate font sizes and spacing: ```html

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

``` ## Body Text Body text uses the `--bf-body-font-size-rem` and `--bf-body-line-height` variables: ```html

This is a paragraph of body text. It uses the default font size and line height.

``` ## Lead Paragraphs Use the `.bf-lead` class for emphasized introductory text: ```html

This is a lead paragraph that stands out from regular body text.

``` ## Text Alignment Use utility classes for text alignment: ```html

Centered text

Left-aligned text

Right-aligned text

``` ## Text Transform ```html

UPPERCASE TEXT

Reset text transform

``` ## Blockquotes ```html

This is a blockquote. It's styled to stand out from regular paragraphs.

``` ## Code Inline code uses `

`:

```html
Use the --bf-blue variable for primary colors.
```

Code blocks use ``:

```html
const example = 'code block';
```

## Lists

### Unordered Lists

```html

  First item
  Second item
  Third item

```

### Ordered Lists

```html

  First item
  Second item
  Third item

```

### Description Lists

```html

  Term
  Description of the term

```

## Responsive Typography

Add the `.bf-responsive-typography` class to the `` tag for responsive font sizing:

```html

  

```