(This is the 11th article of the series of learning design tips from dominKnow KnowledgeBase)
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 web site. 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.
Different browsers may also have an impact on how your text displays. Firefox, for example, displays line height differently from other browsers. In Claro, we’ve eliminated this difference by setting a default line-height value but font rendering differences may still cause line breaks at different places. On some pages, this may mean your four line paragraph becomes five lines.
Some browsers render pixels differently when anti-aliasing and kerning, and this can cause text to vary in weight as well.
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. 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, re-sizing hotspots, or editing for fit.
To view and download this document including screenshot examples, 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 resource links below.
The following are some resources you may find useful:
- Adobe BrowserLab for testing and comparing content in different browsers
- Web Style Guide Online, a great book about much more than Typefaces and Typography, but refer to that article for a brief discussion on font differences for platforms
- webtype, Web Font Quality