PC and Mac operating system (OS) and browser differences related to font display and shape rendering

Platform and browser differences and considerations for creating courses in Claro

Font display in courses is dependent on the fonts the user has installed on their system, as is the case with any website. Most systems (Mac and PC) have all of the fonts that come with Claro.

Font type displays slightly larger on Windows Operating Systems and sometimes appears lighter in weight than on Mac Operating Systems. This is due to a difference in pixel rendering.

Kerning (spacing between characters) also differ between OS editions of Windows XP/Vista and Windows 7/8 with Mac OS bearing more similarity to Windows 7/8. These differences are especially noticeable in longer blocks of text or where there is more word wrapping as the breakpoint can be slightly different.

Different browsers may also have an impact on how your text displays. Some browsers render pixels differently when anti-aliasing and kerning which can cause text to vary in weight. Also, line-height tends to display differently from one browser to the next. These differences may cause line breaks to occur in different locations depending upon the browser used for viewing. This means your paragraph may be four lines on some browsers and five lines on others.

Claro takes care to provide the best possible outcome by providing defaults and using unitless numbers for line-height, but this does not remove the need for well-planned course design. If this is a concern for you, you'll want to choose font and line-height carefully to minimize these differences. Keep in mind that line-height is determined by multiplying the chosen value by the font size. If the result returns a decimal value, some browsers may round that value to the nearest integer while others may preserve decimal values. At the time of writing, the latest versions of Chrome and Safari were rounding these values to the nearest integer while Internet Explorer and Firefox were both preserving the decimal. 

Example: If your font is 12px and you set your line-height to 1.3, this becomes 12 x 1.3 = 15.6. Depending on the browser, you may get a space of 15px, 16px or 15.6px. You may want to enter a Custom value of 1.25 instead of 1.3. (12 x 1.25 = 15).

Any of these issues may cause variations in letter and word spacing that can affect line breaks and the amount of space your text requires. Even when all appropriate measures are taken, it is still impossible for content to have an identical display (down to a fraction of a pixel) across all platforms and browsers. Plan your page and text boxes to allow for 10-15% enlargement.

Check your course and make corrections as required for better accommodation across platforms. Some solutions may just involve increasing the width of text boxes, linking interactions directly to the chosen text or other elements in place of hotspots, or editing for fit.

To view and download this document including screenshot examples and solutions, click Platform and browser differences and considerations for creating courses in Claro.

Bottom line: If your learners use different operating systems and browsers, make sure you do a thorough QA of your course on different devices, OSs, and browsers. There are tools and sites available on the web to assist in this process. Try searching for terms such as “font differences browsers systems” and check out the Image and resource links below.


The following are some resources you may find useful:

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request