# Text formatting (/introduction/guides/text-formatting)







## Best practices

Generally, all text should be contained within one singular `<p>` tag. Example:

```html
<p>
    Hi there! This is a message containing normal text
</p>
```

## New lines

To create a new line, you can use the `<br>` tag. Example:

```html
<p>
    Hi there! This is a message containing normal text
    <br>
    This is a new line!
</p>
```

Which will render as:

> Hi there! This is a message containing normal text\
> This is a new line!

## Text sizes

OnlyFans has the following text size options:

* Largest
* Large
* Default
* Small
* Smallest

<img alt="OnlyFans text size options" src={__img0} placeholder="blur" />

You can use them as follows:

### Smallest

To create the smallest text, you can use the `<span class="m-editor-fs__sm">` tag. Example:

```html
<p>
    Hi there! This is a message containing normal text
    <span class="m-editor-fs__sm">This is the smallest text!</span>
</p>
```

### Small

To create a small text, you can use the `<span class="m-editor-fs__s">` tag. Example:

```html
<p>
    Hi there! This is a message containing normal text
    <span class="m-editor-fs__s">This is a small text!</span>
</p>
```

### Large

To create a large text, you can use the `<span class="m-editor-fs__l">` tag. Example:

```html
<p>
    Hi there! This is a message containing normal text
    <span class="m-editor-fs__l">This is a large text!</span>
</p>
```

### Largest

To create the largest text, you can use the `<span class="m-editor-fs__lg">` tag. Example:

```html
<p>
    Hi there! This is a message containing normal text
    <span class="m-editor-fs__lg">This is the largest text!</span>
</p>
```

## Text styles

When using text styles like **bold** or *italic*, make sure that you wrap the text in a `<span class="m-editor-fs__default">` tag. Example:

```html
<span class="m-editor-fs__default">
    <strong>Bold text</strong>
    <em>Italic text</em>
</span>
```

### Bold

To create bold text, you can use the `<strong>` tag. Example:

```html
<p>
    Hi there! This is a message containing normal text
    <span class="m-editor-fs__default"><strong>This is bold text!</strong></span>
</p>
```

### Italic

To create italic text, you can use the `<em>` tag. Example:

```html
<p>
    Hi there! This is a message containing normal text
    <span class="m-editor-fs__default"><em>This is italic text!</em></span>
</p>
```

## Text colors

OnlyFans has three possible colors for text:

* Gray (`#8a96a3`)
* Blue 1 (`#00aff0`)
* Blue 2 (`#1b98e0`)

<img alt="OnlyFans text color options" src={__img1} placeholder="blur" />

You can use them as follows:

### Gray

To create gray text, you can use the `<span class="m-editor-fs__default m-editor-fc__gray">` tag. Example:

```html
<p>
    Hi there! This is a message containing normal text
    <span class="m-editor-fs__default m-editor-fc__gray">This is gray text!</span>
</p>
```

### Blue 1

To create blue 1 text, you can use the `<span class="m-editor-fs__default m-editor-fc__blue-1">` tag. Example:

```html
<p>
    Hi there! This is a message containing normal text
    <span class="m-editor-fs__default m-editor-fc__blue-1">This is blue 1 text!</span>
</p>
```

### Blue 2

To create blue 2 text, you can use the `<span class="m-editor-fs__default m-editor-fc__blue-2">` tag. Example:

```html
<p>
    Hi there! This is a message containing normal text
    <span class="m-editor-fs__default m-editor-fc__blue-2">This is blue 2 text!</span>
</p>
```