Better Flare typography thanks to CSS

By | March 9, 2016

CSS (Cascading Style Sheets) give you a lot of control over typography on web pages. In this post, I’ll focus on how to change two settings to give your text a more polished and professional look. These settings are available to you in any CSS file, whether you are viewing it in the Editor window of WordPress Theme, or using the Styles Editor or Internal Editor in Madcap Flare or equivalent program.

Line height – this controls the leading of a block of text, i.e., the amount of space between the lines.

Margin-top, Margin-bottom – these settings control space above and below a paragraph and also space above and below a heading or sub-heading.

Controlling the spacing of text is very important. If headings and subheadings float between text blocks, the reader has trouble “attaching” them to the appropriate paragraph. If line height is too big or too small, the text is hard to read.

Line height

In traditional print typography, leading is specified as the point size of the body type followed by that number plus the amount of space between lines, measured in points (72 points equal one inch).

For example, 12/14 means the body type is 12 pt and the leading is two points, for a total of 12+2 = 14 points. Increasing the leading increases the space between lines, so 12/14 would look tighter on the page than 12/18.

In CSS, we can use the line height property to reset leading. The usual unit of measurement in CSS is ems. This is confusing because in print typography, an “em” is the horizontal width of the upper case M in that point size, and it’s use to set the width of the widest dash – the em dash.

In CSS, ems is used more as a relative measure in relation to a default setting. So “1 em” means use the default, “1.5 ems” means add 50%, and “0.5 ems” means reduce by 50%.

The trick, depending on the particular CSS file you are editing, is finding where the line height is set. It can be as high in the CSS hierarchy as the body tag. Here’s a Madcap Flare style sheet, for example:

type-01

“line-height: 1.3 em” specifies a line height that is 130% greater than the default setting.

Setting it to “1 em” looks like this:

type-08

Setting it to 1.5 looks like this:

type-09

And finally, setting it to 2 looks like this:

type-10

Locating the place to put the new line-height value in a WordPress theme may be challenging. Look for a class adjacent to the p tag. Here is an example from the Iconic One theme:

type-02

There are actually four classes here, .entry-content, .entry-summary, .comment-content, and .mu_register. Note that I’ve set the line height to 1.5 (ems are assumed). Also note I’ve added a comment about the bottom margin change, with my initials, “sjg”, attached for easy reference.

Margin-bottom and margin-top

The margin-top and margin-bottom properties control the space above and below paragraphs and headings.

They go with the paragraph (p) tag, which is logical. Here’s how they look in Flare:

type-03

Note the units of measurement are pixels, not ems. Pixels are the most accurate way to specify size and position on web pages and reduce disparities between different sizes and types and resolutions of screens and monitors.

Often the default space after a paragraph is too much. You press Enter once and a full line appears. By reducing the margin-bottom value, you can reduce this space.

Here’s the default in the WordPress theme 2016. Margin bottom set to 1.5 em:

type-04

And here is 0.5 em:

type-05

Finally, we can use margin top and margin bottom to control spacing above and below the h1, h2 and h3 headings.

In print layouts, we’re fussy about this, especially in multi-column layouts.

Two key ideas:

One: a header or subheading should be closer to the text below it than the text above it. It should not float in the middle of the space.

Here’s what we’re aiming for:

 

type-06

 

This is a matter of adjusting the h2 values in WordPress. Here I’ve reduced the margin-bottom value to 0.2 ems:

 

type-07

Two: on a multi-column layout, the baselines of text should line up right across multiple columns. This means that if there are headings and subheadings in any of the columns, the total height of the heading + space above and below should be whole number multiplier of the body text point size plus leading. In other words, if the body text is set in 10/12 Times, a subheading set in 14 pt could have 6 pt below and 16 pt above because the grand total of 14 + 6 + 16 is 36, which is three times 12.

If you don’t work with multi-column layouts, don’t worry because you’ll never need to do this math!

But the key point is to understand how these top and bottom margin settings can be used for precise spacing above and below text. You may enter ems or pixels as units of measurement. Experiment to get the best results.

Leave a Reply

Your email address will not be published. Required fields are marked *