0

I'm loading a web font using @font-face but the height of my elements changes slightly once the font is loaded because the vertical spacing is slightly different. It seems to use the vertical spacing of the default font or next font in the family before adjusting to the web font when it's loaded.

How do I tell the browser what the vertical spacing will be for the web font before it's loaded?

Berry Blue
  • 15,330
  • 18
  • 62
  • 113

2 Answers2

0

Setting the line-height property to a fixed-pixel value on your desired element will work.

Lochlan
  • 2,666
  • 3
  • 23
  • 25
0

A good start is to set your base font size (in body) in px, set all other font sizes as em, then set your line-heights as em (1em is 100% of the font-size).

You should set your default line-height to between 120% and 145% of your font-size (1.2em to 1.45em). This gives good readability for body text. There is a lot of great information on the web about ideal line heights (known as 'leading' in traditional typography), measures font sizes, etc.

Taken together, font sizes for your different elements (p, h1, h2, h3, etc) are called a 'typographic scale'.

Here is a great starting point which uses the 'perfect fourth' scale. It also has appropriate line heights.

body {
  font-size: 16px;
  line-height: 1.45em;
}

p {margin-bottom: 1.3em;}

h1, h2, h3, h4 {
  margin: 1.414em 0 0.5em;
  line-height: 1.2em;
}

h1 {
  margin-top: 0;
  font-size: 3.157em;
}

h2 {font-size: 2.369em;}

h3 {font-size: 1.777em;}

h4 {font-size: 1.333em;}

small, .font_small {font-size: 0.75em;}

I know this is more than you were asking but it is important to know a bit about typography if you are going to be working with type. :)

Some more resources:

Tims
  • 1,987
  • 14
  • 16