Saffron Stroke - Your Web Design Resource » line height

To add a line height to a paragraph using CSS in Microsoft Expression Web 3

Minal — Wed, 23 Sep 2009 16:27:10 +0000

There are two ways to do this with CSS;

By assigning a line height to all the paragraphs:

In the Apply Styles or Manage Styles panel (task pane in earlier versions of Expression Web) click on ‘New Style’. In the selector box, type in ‘p’ and in the Block category, enter a value for line-height, say 20px.

Now all the paragraphs will have a same line height of 20px.

If you do not want a same line-height for all the paragraphs, define a class selector and assign a line-height value. The class selector could be generic (.line_ht) or specific to paragraph element (p.line_ht). (Both these concepts are explained later in the article.) To define these styles follow the same steps given above in pt. 1. Then apply the styles to the paragraphs.

Difference between Generic Class Selectors and Specific Class Selectors

A generic class selector could be assigned to any element like

. Unlike this kind of class selector, the specific class selector will be applied only to those paragraph elements that have a class attribute containing the word ‘line_ht’, and no other elements.

Take a look at these examples to make things more clear;

/*Element Selector */

p { line-height : 20px;}

This paragraph will have a line-height of 20px

This paragraph will have the default line-height

/* Generic Class Selector */

.line_ht { line-height : 20px;}

This paragraph will have a line-height of 20px

This paragraph will also have a line-height of 20px

This paragraph too will have a line-height of 20px

/*Specific Class Selector */

p.line_ht { line-height : 20px;}

This paragraph will have a line-height of 20px

This paragraph will have the default line-height

Unitless Line Heights in CSS

Minal — Tue, 16 Jun 2009 09:30:19 +0000

One of my fellow designers asked me the other day, what are unitless line-heights and how do they work. And I remembered what Eric Meyer’s post on ‘Unitless line-heights’. I was new to designing then and used the old methods of specifying line height in pixels or percentages. Well that was until I came across that post. Then I tried it and found it was a genius option as the output would not be affected by browsers. This article explains how line-height can be unitless. Let us first understand the different values line-height property can take.

The line-height property refers to the distance between the baselines of lines of text. In other words it is the vertical space between lines of text. The image below would help you understand the property in a better way.

Line height could be specified using absolute or relative values.

Absolute values such as pixels (px), points (pt), picas (pc), percentage (%), inches (in), centimeters (cm) and millimeters (mm). Relative values could be em and ex. Line height defined in px, pt, pc, in, cm and mm set a fixed distance between the lines. % on the other hand sets the distance as a % of the current font-size. For example,

Some Text

will set the line-height equal to its font-size 20px.

Where ‘em’ is defined to be the value of font-size given, ‘ex’ refers to the height of the lowercase x in the font used. For more details on ‘em and ex’ read Difference between ‘em’ and ‘ex’ units

If a line-height is defined without a unit, that a ‘Unitless’ height. Simple, isn’t it. See this example;

Some Text

The value for line-height will be interpreted as it current font size. It is calculated by multiplying the current font-size with the numerical value of line-height. So the line height would now be 20px. Yes yes I know what your next question is; what is the difference between the percentage and unitless value since their result is the same. Consider this example:

body { font-size: 20px; line-height: 100%;}

p { font-size: 15px; }

small { font-size: 10px}

This is a para with text

The line-height for body is 100% of 20px = 20px. This is interpreted as line-height: 20px. This computed value is inherited by

and . Hence the line-height for all three elements would be same. And now consider following example:

body { font-size: 20px; line-height: 1;}

p { font-size: 15px; }

small { font-size: 10px}

This is a para with text

In this case the line-height computed for is 20px, but the line-height value that is inherited is 1 and not the computed value. Hence when the value 1 is inherited by

the line-height for paragraph is 15px and for will be 10px.

Set Text Spacing in Microsoft Expression Web 2

Minal — Tue, 27 Jan 2009 10:00:05 +0000

Spacing can be set between characters, words, lines and paragraphs. The Font dialog box contains text space settings for characters and words; whereas the Paragraph dialog box lets you adjust the space between lines and paragraphs.

To set spacing between characters:

1. In Design, Split or Code view; select the piece of text you want to adjust the spacing for.

2. Go to Format > Font…

3. In the Font dialog box, switch to Character Spacing tab.

4. In the Spacing drop down box, choose Expanded to increase the space or Condensed to decrease the space.

5. If you want set the spacing to be normal (default selection) but want to change that a bit, then in the ‘By’ drop down box, set the number of points to specify the exact increase or decrease in the character space.

6. Click OK.

TIP: You can also choose the position of the characters in the Position drop down box.

To set spacing between words, lines and paragraphs:

1. In Design, Split or Code view; select the piece of text you want to adjust the spacing for.

2. Go to Format > Paragraph…

3. In the Paragraph dialog box, under the Spacing section; do one or more of the following:

· Enter value in pixels or use the arrows to increase or decrease spacing before the paragraph in the Before box.

· Enter value in pixels or use the arrows to increase or decrease spacing after the paragraph in the After box.

· Enter value in pixels or use the arrows to increase or decrease spacing between words in the Word box.

· Click on the drop down and choose an option to set spacing between lines in the Line Spacing box.

4. The Preview in the dialog box gives you an idea of how the new spacing would look in your page.

5. Click OK.

TIP: You can also set the indentation by choosing an option from the Alignment drop down box.