Fluid typography in web design refers to the practice of using scalable type sizes instead of fixed ones. The idea is to allow the font size to adjust smoothly based on varying conditions, most commonly the viewport width of a device. This approach ensures that typography remains proportional, readable, and aesthetically pleasing across a wide range of devices and screen sizes, from small mobile phones to large desktop monitors.
Select the font size of your paragraph block either from pre-defined sizes or set them to a fixed size.
Fluid font sizes in Popcorn are set to the following:
You can also select fixed font sizes using px, em and rem.
And if you need to reset back to defaults, simply click Typography Options (1) and Reset (2).
Setting the appearance of your paragraph block is also achievable using either Site Editor or in your pages, posts and custom post types.
Enable Appearance and select from the following font-weights.
Thin / Italic (100)
Extra Light / Italic (200)
Light / Italic (300)
Regular / Italic (400)
Medium / Italic (500)
Semi Bold / Italic (600)
Bold / Italic (700)
Extra Bold / Italic (800)
Black / Italic (900)
Note: Not all font weights will be available across all fonts – we suggest experimenting with what looks good.
Line Height (4)
You can change the default (1.5) line height which helps with spacing out your paragraphs.
Enable Line Height (1) and adjust accordingly.
Letter Spacing (5)
You can change the letter spacing of your text to make it breathe more.
Enable Letter Spacing and adjust accordingly.
Units available are:
Examples of Letter Spacing
1px (pixel) letter spacing
3px (pixel) letter spacing
1rem (root em) letter spacing
Note: We suggest experimenting with these settings to get a good reading experience for your site.
Text Decoration (6)
Text decoration in web design and typography refers to the various embellishments or stylistic changes that can be applied to font characters.
Enable Text Decoration and adjust accordingly.
Options available are:
Letter Case (7)
You can change the letter case of your paragraph text easily.
Enable Letter Case and adjust accordingly.
Options available are:
Capitalize each word
Drop Cap (8)
Drop caps, short for “dropped capitals,” refer to the typographic style where the initial letter of a paragraph is enlarged and “dropped” down to span multiple lines of text. The primary purpose of using drop caps is decorative, aiming to add a touch of elegance and draw attention to the beginning of a section or chapter.
Enable Dropped Caps and adjust accordingly.
Here is an example piece of test that has Drop Caps enabled in Popcorn Theme. Notice how the first letter of this paragraph is enlarged to add extra style to your content. Not really used that often but has an interesting effect when used in the right way.
“Padding” is a term used in web design and development, particularly in the context of CSS (Cascading Style Sheets). It refers to the space or cushion between the content of an element and its border. Unlike margins, which create space outside an element’s border, padding creates space within the element, between its content and its border.
You can enable Padding (1) and Margin (2) in the block settings.
Padding will add space within your paragraph block. The easiest way to see how this works is to add a background color.
You can set padding in px, em, rem, or the default slider will use Presets.
You can set top, right, bottom, and left padding individually by pressing the unlink button.
Margin will add space outside your paragraph block. This allows for space between blocks/elements on your page or post.
As with padding, you can set top, right, bottom, and left padding individually by pressing the unlink button.
Opening the Advanced section will enable you to add HTML anchors and apply custom CSS classes to your paragraph block.
The HTML anchor field allows you to ad IDs to your paragraph blocks, you can link to these directly from anywhere on your site. For example if you had the IS of some-html-anchor on your element, you can link to that with your page address followed by #some-html-anchor
For example: https://someamazingwebsite.com/your-amazing-post#some-html-anchor
Additional CSS Class(es)
You can add your own CSS classes to your paragraph block here. Classes should be separated by a space.
You can add your own class(es) and target them in your own CSS.
The article was written by
I’m Phil – the lead developer for PopcornTheme. I work alongside Alex and Carl at PopcornTheme. Im the one that does the coding part and updates. Sometimes I’ll write some documentation too.