# Line height

The line height feature lets you adjust the vertical spacing between lines of text, controlling how tightly or loosely text is packed within paragraphs. This feature is essential for document formatting, helping users create professional-looking content with proper typography spacing.

> **Unlock this feature with selected CKEditor Plans**
>
> Try all premium features – no credit card needed.
>
> [Sign up for a free trial ](https://portal.ckeditor.com/checkout?plan=free)[Select a Plan](https://ckeditor.com/pricing/)

<a id="demo">

## Demo

Select content and change the line height using the toolbar button . Please note that the feature can only be applied to whole blocks of content such as paragraphs, tables or lists.

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

This demo presents a limited set of features. Visit the [feature-rich editor example](../examples/builds-custom/full-featured-editor.md) to see more in action.

<a id="installation">

## Installation

After [installing the editor](../getting-started/installation/cloud/quick-start.md), add the feature to your plugin list and toolbar configuration:

**NPM**

```js
import { ClassicEditor } from 'ckeditor5';
import { LineHeight } from 'ckeditor5-premium-features';

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ LineHeight, /* ... */ ],
		toolbar: [ 'lineHeight', /* ... */ ],
		lineHeight: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const { ClassicEditor } = CKEDITOR;
const { LineHeight } = CKEDITOR_PREMIUM_FEATURES;

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ LineHeight, /* ... */ ],
		toolbar: [ 'lineHeight', /* ... */ ],
		lineHeight: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

> **Note**
>
> Read more about [installing plugins](../getting-started/setup/configuration.md) and [toolbar configuration](../getting-started/setup/toolbar.md).

<a id="activating-the-feature">

### Activating the feature

To use this premium feature, you need to activate it with proper credentials. Refer to the [License key and activation](../getting-started/licensing/license-key-and-activation.md) guide for details.

<a id="configuration">

## Configuration

The line height feature provides the following predefined values as options in the dropdown:

* `1`
* `1.15`
* `'default'`
* `2`
* `2.5`
* `3`

While rendering the UI layer, the `'default'` option is replaced with a value determined by the editor’s configuration. By default, the `line-height` value is `1.5`, but you can change this by updating the configuration and content styles. The other values are multipliers of the default one.

* Using a CSS variable in the editor’s content styles:

  ```css
  :root {
  	--ck-content-line-height: 1.65;
  }
  ```

* Setting a default value in the editor configuration:

  ```js
  lineHeight: {
  	defaultValue: 1.65
  }
  ```

The [`config.lineHeight.defaultValue`](../api/module_line-height_lineheightconfig-LineHeightConfig.md#member-defaultValue) should be synchronized with the [editor content styles](../getting-started/setup/content-styles.md).

<a id="using-the-predefined-presets">

### Using the predefined presets

The line height feature defines 2 named presets:

* `'single'`
* `'double'`

Each size assigns a corresponding class to a block element. For example, the `'double'` preset looks as follows in the editor data:

```html
<p class="line-height-double">...</p>
```

The CSS definition for these classes (presets) must be included in the web page styles where the edited content is rendered.

Here is an example of the line height CSS classes:

```css
.ck-content .line-height-single {
	line-height: 1;
}

.ck-content .line-height-double {
	line-height: 2;
}
```

An example of an editor that supports more line height sizes:

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		lineHeight: {
			options: [
				'single',
				'default',
				'double',
				{
					title: 'Triple', // A name displayed in the dropdown UI.
					model: 'triple', // A value used in the command and stored in the model.
					view: {
						key: 'class',
						value: 'line-height-triple'
					}
				}
			]
		},
		toolbar: [
			'heading', 'bulletedList', 'numberedList', 'lineHeight', 'undo', 'redo'
		]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

```css
.ck-content .line-height-triple {
	line-height: 3;
}
```

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

<a id="using-numerical-values">

### Using numerical values

The line height feature also supports numerical values.

In this case, each size adds the `style` attribute to the block element, which sets the `line-height` CSS property. For example, a line height of `2` will be represented in the editor data as:

```html
<p style="line-height: 2">...</p>
```

Here is an example of a WYSIWYG editor that supports numerical line heights. Note that `'default'` (`1.5`) is controlled by the default styles of the web page:

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		lineHeight: {
			options: [
				0.5,
				1,
				'default', // This will be replaced with the default value (1.5).
				1.65,
				2,
				2.5,
				3
			]
		},
		toolbar: [
			'heading', 'bulletedList', 'numberedList', 'lineHeight', 'undo', 'redo'
		]
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

> **Note**
>
> The line height feature automatically converts percentage-based values (for example, `100%`) into unitless numeric equivalents (such as `1`) to ensure consistency with CSS standards and editor rendering behavior.

<a id="accepting-all-line-height-values">

### Accepting all line-height values

By default, all `line-height` values that are not specified in the `config.lineHeight.options` are stripped. You can enable support for all line heights by using the [`config.lineHeight.supportAllValues`](../api/module_line-height_lineheightconfig-LineHeightConfig.md#member-supportAllValues) option.

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		lineHeight: {
			options: [
				// Numerical values.
				// ...
			],
			supportAllValues: true
		},
		// More of editor's configuration.
		// ...
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

> **Note**
>
> This option can be used only in combination with [numerical values](#using-numerical-values).

<a id="related-features">

## Related features

Check out also these CKEditor 5 features to gain better control over your content style and format:

* [Font styles](font.md) – Easily and efficiently control the font [family](font.md#configuring-the-font-family-feature), [size](font.md#configuring-the-font-size-feature), [text or background color](font.md#configuring-the-font-color-and-font-background-color-features).
* [Text alignment](text-alignment.md) – Because it does matter whether the content is left, right, centered, or justified.
* [Block indentation](indent.md) – Organize your content into visually separated blocks, indent crucial paragraphs, etc.
* [Remove format](remove-format.md) – Easily clean basic text formatting.

<a id="common-api">

## Common API

The [`LineHeight`](../api/module_line-height_lineheight-LineHeight.md) plugin registers:

* The `'lineHeight'` dropdown.

* The [`'lineHeight'`](../api/module_line-height_lineheightcommand-LineHeightCommand.md) command.

  The number of options and their names correspond to the [`config.lineHeight.options`](../api/module_line-height_lineheightconfig-LineHeightConfig.md#member-options) configuration option.

  You can change the line height of the current selection by executing the command with a desired value:

  ```js
  // For numerical values:
  editor.execute( 'lineHeight', { value: 2 } );

  // For named presets:
  editor.execute( 'lineHeight', { value: 'double' } );
  ```

  Passing an empty value will remove any `config.lineHeight` set:

  ```js
  editor.execute( 'lineHeight' );
  ```

---

Full index of the CKEditor 5 documentation: [llms.txt](../../llms.txt)