Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I know that font rendering across browsers is not the same. For specific reasons I need the same view of text (pixel by pixel) in every browser.

One option is make text as a image.

I have an idea about typesetter that has table with images of letters. And put one image by other (one letter by other). Is there something like this?

share|improve this question
add comment

2 Answers 2

You could use images as text but then you open a whole new can of problems such as:

  • Search Engine Optimisation
  • User Accessibility
  • Responsive Design
  • Website Speed

Pixel Perfect Font's Don't Exist

It's worth mentioning that no font will serve a pixel perfect because of the way font's are designed and then rendered. Most indifference are unnoticeable to the human eye, for example the same font will look different on a MAC than it might on a PC, but it doesn't stop there. Firefox 4 might render the font differently than say Firefox 12 - Also then you got to take into account that a same PC running at 1600x1080 may render the font slightly different than the same setup running at 1920x1080. Fact of the matter there is no such thing as getting it perfect.

So the belief that only browsers affect the outcome is false

  • Screen Technology
  • Resolution
  • Browser Platform
  • Browser Version
  • Etc

Images can look different

Also, images may look different on one screen then to the next, yes they will be techincally the same but visually they may note and this because of many factors such as color schemes, screen technology and so forth.

End Results

Your end result should be a font that fits your brand or image of the website that looks great and is good on the eyes. Visual indifference's should be noted but if the font looks good on all devices but does have indifference's then regardless of those indifference's the outcome should be same which is a good looking font. With the use of images or fonts your never get a identical like for like but what you should hope for is the outcome of looking 'GREAT' or the font differences can't be easily seen by the human eye. If everyone had the same PC, Same Spec, Same OS, Same Browser, Same Screen then this would be an easier task but currently we live in a competitive world with lots of gizmos and your seeking an impossible task :P Oh!! and a font may look different to one person than the next but don't get me started on that lol ;)

share|improve this answer
add comment

The reasons why fonts render differently is because most are proportional meaning that the spacing and rendering is proportional based upon the situation where the non-proportional typefaces are represented as is. Non-proportional are know as monospace.

From Wikipedia:
In a web page, the <tt> </tt>, <code> </code> or <pre> </pre> HTML tags most commonly specify monospaced fonts.

Examples of monospaced typefaces are Courier, Prestige Elite, Fixedsys, and Monaco. There exist Roman, Blackletter, and Gaelic monospaced typefaces.

Here are the links to the Wikipedia articles: http://en.wikipedia.org/wiki/Typeface and http://en.wikipedia.org/wiki/Monospaced_font

Try one of the fonts but pick a font that should exist on all computers which may be Courier and Fixedsys and on Windows computers, Terminal. I suggest reading the Wikipedia articles and experiment.

Otherwise using images could yield disastrously slow download times (swollen HTML), not search engine friendly, and possibly have other issues. But it would work.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.