Text styles set how each kind of text looks across your theme: its font, size, weight, line height, letter spacing and letter case. Blocks and the posts you write in Ghost follow them. Open them with the paintbrush icon, Styles, in the icon rail, then click Typography. They are listed under Elements. Click a row to open its settings beside it.
Elements
Element
Where it shows
Default
Text
Body text: paragraphs, lists and post text
Body font, Medium (16 px), Regular, line height 1.5
Headings
Heading blocks by their level, and headings in posts
Headings font, Semibold, H1 4X large down to H6 Medium
Links
Links inside text: in paragraphs, headings, lists, collapses, captions and posts. Links take the scheme's Accent color. Menu links and buttons are styled in their own block settings.
The Medium weight, underlined
Captions
Image and video captions
Body font, Small (14 px), line height 1.43
Quotes
Quotes in posts
The same as Text
Code
Code blocks in posts
Monospace font, Small, line height 1.4
When you open Text or a heading level, Used by, in the panel on the other side of the canvas, lists the blocks that use it. Links, captions, quotes and code show no list, because they style every one of their kind.
Text style settings
Text, Captions, Quotes and each heading level have all the settings below. Links and Code have fewer, as their own parts below say.
Setting
What it does
Font
Which of the project's fonts the text uses: Headings, Body or Monospace. Headings and body fonts are set on this screen under Fonts, and the monospace font in Manage fonts; see Change your fonts.
Font size
A named size from Font sizes, or Custom for a fixed size in pixels, from 1 to 400. A named size keeps following that size when you change it.
Appearance
The weight, from Light, Regular, Medium, Semibold, Bold and Extra bold, and the regular or italic icon beside it.
Line height
The space between lines, as a multiple of the font size, from 0.5 to 4.
Letter spacing
The space between letters, in em, from -0.5 to 1. A small negative value, such as -0.02, draws letters closer.
Letter case
None keeps the text as typed. The other icons show it in capitals (Uppercase), small letters (Lowercase) or with each word capitalized (Capitalize).
Headings
The tabs at the top of Headings pick what you change: All changes every level at once, and H1 to H6 change one level. All has no Font size, because each level keeps its own. A field shows Mixed when the levels differ in it.
Level
Font size
Line height
Letter spacing
H1
4X large
1.1
-0.025
H2
3X large
1.15
-0.02
H3
2X large
1.2
-0.015
H4
Extra large
1.25
-0.01
H5
Large
1.25
-0.01
H6
Medium
1.25
-0.01
Each level also has In posts, the size of that heading inside post content. Auto, the default, scales the post heading with the level's Font size, keeping their proportion. Pick a named size or Custom to set it on its own.
Links
Links take their font and size from the text around them, so Links has only Appearance and Decoration. Decoration draws a line under the link (Underline), through it (Strikethrough) or neither (None).
Code
Code always uses the monospace font, so Code has only Font size and Line height.
Font sizes
Font sizes, at the bottom of the Typography screen, lists the named sizes text styles and blocks pick from. Change one, and every style and block that uses it changes.
Size
On phones
On desktops
4X large
36 px
48 px
3X large
30 px
36 px
2X large
24 px
30 px
Extra large
20 px
20 px
Large
18 px
18 px
Medium
16 px
16 px
Small
14 px
14 px
Extra small
12 px
12 px
Click a size to open its settings:
Setting
What it does
Name
Shows for custom sizes only. Up to 32 characters.
Size
Fixed keeps one size on every screen. Fluid grows with the screen width between On phones and On desktops.
Slider and field under Size
With Fixed, the size in px or rem, from 1 to 400 px. The slider reaches 120 px; type a larger value in the field.
On phones, On desktops
With Fluid, the size on a screen 390 px wide or narrower, and on a screen 960 px wide or wider. Between the two widths, the size grows evenly.
To add your own size, click the plus button next to Custom, the heading under the theme sizes. It starts as "Custom 1", fixed at 20 px. A project holds up to 24 custom sizes. To rename one, double-click its row. To delete one, right-click its row and click Delete. Every style and block that used a deleted size switches to Medium.
To put a text style or a theme size back as it was, open its settings, then its menu, the three dots next to its name, and click Reset to default. Custom sizes have Delete there instead.
Change one block's text
A block's own Typography settings can change its size or weight without changing the style for the whole site. See Typography settings.
Text styles set how each kind of text looks across your theme: its font, size, weight, line height, letter spacing and letter case. Blocks and the posts you write in Ghost follow them. Open them with the paintbrush icon, Styles, in the icon rail, then click Typography. They are listed under Elements. Click a row to open its settings beside it.
Elements
Element
Where it shows
Default
Text
Body text: paragraphs, lists and post text
Body font, Medium (16 px), Regular, line height 1.5
Headings
Heading blocks by their level, and headings in posts
Headings font, Semibold, H1 4X large down to H6 Medium
Links
Links inside text: in paragraphs, headings, lists, collapses, captions and posts. Links take the scheme's Accent color. Menu links and buttons are styled in their own block settings.
The Medium weight, underlined
Captions
Image and video captions
Body font, Small (14 px), line height 1.43
Quotes
Quotes in posts
The same as Text
Code
Code blocks in posts
Monospace font, Small, line height 1.4
When you open Text or a heading level, Used by, in the panel on the other side of the canvas, lists the blocks that use it. Links, captions, quotes and code show no list, because they style every one of their kind.
Text style settings
Text, Captions, Quotes and each heading level have all the settings below. Links and Code have fewer, as their own parts below say.
Setting
What it does
Font
Which of the project's fonts the text uses: Headings, Body or Monospace. Headings and body fonts are set on this screen under Fonts, and the monospace font in Manage fonts; see Change your fonts.
Font size
A named size from Font sizes, or Custom for a fixed size in pixels, from 1 to 400. A named size keeps following that size when you change it.
Appearance
The weight, from Light, Regular, Medium, Semibold, Bold and Extra bold, and the regular or italic icon beside it.
Line height
The space between lines, as a multiple of the font size, from 0.5 to 4.
Letter spacing
The space between letters, in em, from -0.5 to 1. A small negative value, such as -0.02, draws letters closer.
Letter case
None keeps the text as typed. The other icons show it in capitals (Uppercase), small letters (Lowercase) or with each word capitalized (Capitalize).
Headings
The tabs at the top of Headings pick what you change: All changes every level at once, and H1 to H6 change one level. All has no Font size, because each level keeps its own. A field shows Mixed when the levels differ in it.
Level
Font size
Line height
Letter spacing
H1
4X large
1.1
-0.025
H2
3X large
1.15
-0.02
H3
2X large
1.2
-0.015
H4
Extra large
1.25
-0.01
H5
Large
1.25
-0.01
H6
Medium
1.25
-0.01
Each level also has In posts, the size of that heading inside post content. Auto, the default, scales the post heading with the level's Font size, keeping their proportion. Pick a named size or Custom to set it on its own.
Links
Links take their font and size from the text around them, so Links has only Appearance and Decoration. Decoration draws a line under the link (Underline), through it (Strikethrough) or neither (None).
Code
Code always uses the monospace font, so Code has only Font size and Line height.
Font sizes
Font sizes, at the bottom of the Typography screen, lists the named sizes text styles and blocks pick from. Change one, and every style and block that uses it changes.
Size
On phones
On desktops
4X large
36 px
48 px
3X large
30 px
36 px
2X large
24 px
30 px
Extra large
20 px
20 px
Large
18 px
18 px
Medium
16 px
16 px
Small
14 px
14 px
Extra small
12 px
12 px
Click a size to open its settings:
Setting
What it does
Name
Shows for custom sizes only. Up to 32 characters.
Size
Fixed keeps one size on every screen. Fluid grows with the screen width between On phones and On desktops.
Slider and field under Size
With Fixed, the size in px or rem, from 1 to 400 px. The slider reaches 120 px; type a larger value in the field.
On phones, On desktops
With Fluid, the size on a screen 390 px wide or narrower, and on a screen 960 px wide or wider. Between the two widths, the size grows evenly.
To add your own size, click the plus button next to Custom, the heading under the theme sizes. It starts as "Custom 1", fixed at 20 px. A project holds up to 24 custom sizes. To rename one, double-click its row. To delete one, right-click its row and click Delete. Every style and block that used a deleted size switches to Medium.
To put a text style or a theme size back as it was, open its settings, then its menu, the three dots next to its name, and click Reset to default. Custom sizes have Delete there instead.
Change one block's text
A block's own Typography settings can change its size or weight without changing the style for the whole site. See Typography settings.