: Website typesetting. Font rendering consistency across browsers I know that font rendering across browsers is not the same. For specific reasons I need the same view of text (pixel by pixel)

@Nimeshi995

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 ;)

Vote Up Vote Down

@Ann8826881

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: en.wikipedia.org/wiki/Typeface and 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.

Vote Up Vote Down