Sometimes web page designers make interesting choices. Why not use tiny, fancy type on a shaded background to make reading a page more…legible? Apple’s built-in Reader View in Safari across all its platforms lets you make short work of hard-to-read type. But you lose most of the formatting, some of the images, and other elements of the page.

Safari for macOS has another trick up its sleeve: custom CSS. Where HTML defines the structure and content of a web page, CSS (Cascading Style Sheets) is the coding that underlies the appearance and formatting, from type sizes to columns and floating boxes. In Safari > Preferences > Advanced, you can select a custom style sheet from the Style Sheet pop-up menu.

mac911 safari style sheet override IDG

You can override Web page’s definitions of how things should appear.

You don’t need to know much CSS to have an impact. For example, suppose you like Arial above all other typefaces. A CSS file that contains this single line will change the typeface on all pages to Arial:

html body { font-family: Arial !important }

Decoded, that says “for an HTML page’s body section, the container for all the stuff you see on a page, set the font family to Arial and override everything else.” The cascading part of the CSS name defines a hierarchy about which style characteristics to use when there are overlapping choices. The browser gets top pick and the !important flag says, “I don’t care what any other style sheet says—use my parameter!”

If you prefer another typeface, look through the Fonts pane in any app that shows it (TextEdit is such an app; press Command-T to display it), and enter the name in the style sheet above exactly as it appears. If it contains spaces, put quotation marks around the name, as in font-family: "Cooper Hewitt" !important

You can swap the sheet on and off through the Style Sheet menu in Advanced. Just pick None Selected when you don’t want to use it. You can also modify the text in the style sheet so it’s not applicable, like changing html to nohtml and saving it.

A CSS file is a plain text file with the .css extension. You can create this with TextEdit, built into macOS. Ironically, TextEdit only creates rich text files with formatting by default. Choose TextEdit > Preferences and select the Plain Text option under Format, and then choose File > New to create a plain text file. Save it as any name plus the .css extension. Now in the Style Sheet menu, select Other and choose that file.

You don’t have to go global in your definition, as you can target specific elements on a page or other aspects by diving into the HTML and CSS—it’s not as daunting as you might think. On the easy end, W3schools offers straightforward tutorials and recipes; on the more technical side, Craig Anthony wrote this look at Safari overrides, which may give you different insight.

I’ve used some custom CSS for very particular fixes. For instance, the Substack newsletter empire has its text tracking (the overall spacing between letters) set too large for my reading pleasure. (Kerning, by the way, is the space between adjacent letters, not across a range.) This CSS definition takes care of that for me, while also bumping the type size for my aging eyes:

.post p { letter-spacing: -0.1pt !important; font-size: 17px !important; }

The .post p part means, “For paragraphs [p] tagged with the name ‘post’, apply this style.” This can backfire for any other web page that happens to use “post” as a tagging (or “class”) name, too, as those names can be reused across websites!

Ask Mac 911

We’ve compiled a list of the questions we get asked most frequently along with answers and links to columns: read our super FAQ to see if your question is covered. If not, we’re always looking for new problems to solve! Email yours to including screen captures as appropriate, and whether you want your full name used. Not every question will be answered, we don’t reply to email, and we cannot provide direct troubleshooting advice.

Note: When you purchase something after clicking links in our articles, we may earn a small commission. Read our affiliate link policy for more details.



Please enter your comment!
Please enter your name here