Small caps shouldn’t be used with a typeface/browsers that don’t properly support them and just shrink capital letters instead, they just look spindly and bad.

Small caps shouldn’t be used with a typeface/browsers that don’t properly support them and just shrink capital letters instead, they just look spindly and bad. Either find a real small caps font, or skip the idea. Likewise for italics: use a real italic font instead of a browser-generated oblique version of the roman font. Totally agree. At least with italics, you can use CSS to instruct the browser to not create fake italics using the font-synthesis property: https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthe.... Also, setting the document font size to 11px is a bad idea for a whole lot of accessibility reasons. The current best practice is to leave the global font size at 100%, which in most browsers is 16px by default. This allows users to scale the type up (or down) as needed, unlike various versions of IE which won’t allow this if the base font-size is set in pixels. This allows the media queries to work correctly, since they always assume 1em = 16px. Resizing the fonts should be done in rems, with pixels as a fallback for non-supporting browsers.