Text Rendering Different in Different Browsers and OS's

Hi,

I am doing a relative easy website that has text that is rendering different in not only different browsers, but the same browser - different os (ie text is rendering different in Firefox on my Mac then on my PC) - very frustrating this. I am using a weird font (for some reason - american typewrite) and wondering if a more “standard” font would eliminate this issue? Has anyone else experienced this?

I usually just use the “Web” fonts, so I don't have to worry about any licensing issues or technical issues.

…but here's a link to the documentation…

Unfortunately browsers use their own independent rendering paths, so it can be subtly different between them. Some of these differences can add up and cause text wrapping in different spots and such.

If it is more than minor differences, it might be that the font itself is being chosen differently.

There are a few controls like CSS text-rendering and font smoothing, but these are not super standardized and won't necessarily help with consistency.

You're welcome to post screenshots or a zip of your .hype document if you'd like more guidance (but in most cases there's not much that can be done).

Hi All,

See below screen shots of what I’m contending with here. Also feel free to go to www.squarebristle.com as this is live now.

If I go to a more standard font, like Arial, perhaps this will go away like “Photics” says above?
I will try it tonight. Appreciate the responses.

Yes, the issue is that you are using American Typewriter, but this is not a font available on windows, so it is falling back to Courier New. I recommend what @Photics said and choose one from the "Web" category.

yes, “rookie” mistake, and wasn’t paying attention to the type “type”.
thank you all and I could say I apologize for wasting your time… ha.

1 Like

Not a waste of time - actually I'd say this is more of a UI failing in Hype to not make it more clear!