How to make fonts display on web cross-platform?

Problem :

I use pixel setting of font size in my CSS-code. for example:

.items {
    font-family: Verdana, Arial;
    font-size: 14px;
    width: 100px;
}

I have a problem. For example there are words Hello words written in element of class .items. Element fits in 100px and is displayed OK (in Ubuntu Linux). But in Windows browsers fonts are wider and text doesn't fit in 100px, so 2 lines of text appear (that I don't want to be)

How to protect your site from such problems? How to be sure, that every text in elements fits its container?

Solution :

You might try to protect from such problems by setting a large enough width. But there is no way to guarantee that some width is always sufficient, and if the width is sufficient in most cases, then it is far too large in many cases.

The width of text depends on many things, not just on font size (which has no simple relationship to the width)—characteristics of the font (advance widths of characters), the actual text (say, many m’s vs. many i’s), and in principle letter spacing and word spacing too. It does not depend on operating system, though different systems may have different common fonts. It indirectly depends on language, since different languages use different writing systems, whereby widths of letters may vary a lot.

Using em instead of px has several benefits, but it does not help in this issue. The em unit is the height of the font and cannot be used to evaluate the width of characters.

So you just have to live with this. For example, if you wish to set up a vertical navigation bar where the links (presented in button-like manner or otherwise with their width visible), a single-column table is the practical solution, since it results in a presentation where all cells are of equal width, determined by the cell with largest width requirements.