Fonts display differently on Firefox only

Elements Typography
1

Hi there

I have a lot of trouble when laying out blocks of text on hype documents because when I preview them in Firefox the fonts display differently to all other browsers. Here’s an example:

Here is a simple block of text in Arial with a box around it:

Font01.png1151×746 132 KB

When I view the web page, everything looks as expected in Safari:

…and in Chrome:

But when I view it in Firefox, it looks like this:

This happens for many standard fonts. Here is the same block using Times New Roman:

Some fonts seem to display smaller rather than larger (eg. Courier and Helvetica) and a couple of them display the same size. But it is always Firefox that has the issue, this never happens on any other browser.

This is really frustrating as it makes it almost impossible to lay out websites so that they look the same across all browsers. If I leave enough space for the larger text on Firefox I’m left with ugly gaps on other browsers, whereas if it looks right on the other browsers I often get text overlaps on Firefox.

Is this just a fundamental problem with Firefox or can this issue be avoided somehow?

Many thanks
Rob

2

yes, fonttracking is almost the same, but lineheight differs the most …

what could be minimum efford within hype¿
try setting a relative line-height within css

line-height: 1.15; <- adjust it to your needs

set some class to your containers that should match to this setting …

3

Thanks for the suggestion.

Could I ask you explain that to me as a beginner? My knowledge of CSS is quite limited.

Would I add this in the Head of the page and then reference it in each text box, something like:

<head>
<style>
p.mytext {
    line-height: 1.15;
}
</style>
</head>

And then in my text boxes put:

<p class="mytext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</p>

Does that look right?

Thanks
Rob :slight_smile:

4

You can set an explicit line height (this is a CSS property) in the Typography inspector. Instead of using 'normal' (no value set), Firefox will likely behave better if you set a value yourself.

This what @h_classen's suggests, but without code.

5

Thank you, this seems to have done the trick.