Keeping different fonts on one line within a fixed width

Question

I am making a very basic webpage, consisting of some text inside a fixed width. Here is some example html

<div id ="wrap">
 <h1>An Annoying Heading</h1>
 <p>Some text some text some text some text some text some text some text some text some text some text</p>
</div>

That is the only thing within the body tags. The CSS is

*{
  padding: 0;
  margin: 0; 
}    
#wrap{
  width: 320px;
  margin: 50px auto;
}
body{
  font-family: calibri,tahoma,arial,sans-serif;
}
p{
  text-align: justify;
  font-size: 12pt;
  padding-top: 0.4em;
}
h1 {
  padding-bottom: 0.1em;
  font-size: 26pt;
}

I want the heading to take up the full width available.

I can specify the size of the font to approximately match the width of the div, which usually works fine.

However, if the browser cannot use calibri it looks at the font-family to decide what to use instead. Annoyingly, the next fonts are displayed as a bigger size to calibri and the heading is split over two lines instead of one.

Is there a way to ensure the heading takes up the full width available and remains on a single line irrespective of the font used?

Answer 1

You Can use some JS library (jQuery for example) to determine the highest font size, and set it for containers containings the smaller text. So You will end in a single equal size line with different font, or You can change the fonts dynamically too.

Answer 2

I don't believe there is any current CSS facility to adjust font size to fit a fixed width so I think you will need to use a JavaScript solution. The following question would seem to have all the info you need to make it happen:

http://stackoverflow.com/questions/504859/how-can-you-measure-the-space-that-a-text-will-take-in-javascript

Answer 3

The main answer is that your font stack should reflect what you need: a set of fonts that all take up about the same amount of space in a single line. You can do some tests and adjust your stack.

The other option is to find an intermediate size, and then add text-align: justify; to spread things out a bit in a fluid way.