How to Change the Heading Styles in Google Docs

So I’m pretty close to never opening any Microsoft Office apps. I’ve moved completely from Entourage to Gmail and Gcal. All of my presentations are done in Google Presentation, the vast majority of my spreadsheets in Google Spreadsheet, and, naturally, my documents are written in Google Document.

With the awesome Manymoon providing a seamless layer of organization to all of these Google apps (as well as being a kick ass product management app), I really don’t miss MS Office at all.

Except for a few minor annoyances, there’s really no reason to open Office. One such annoyance was the inability to change the standard size, color and font choices for the Headings. This irked me, because the supplied heading qualities really look sort of terrible in the context of most docs; too big, too bold, too much deviation between the point sizes from Header 1 (VERY big) to Header 2, (not proportionally big), and so forth.

Here’s a screen grab of the standard headers:

As you can see, Header 4 – at 10pt type – is a smaller point size than typical 12 point body text type. This means it looks terrible.

Happily, Google recently made it easy to alter the CSS of the doc. Go to Edit > Edit CSS, and you’re greeted with a blank screen where you can add any CSS elements you want.

To change the Heading Styles, I added this:

h1
{ font-family: Calibri;
font-size: 16pt;
color: #336699; }

h2
{ font-family: Calibri;
font-size: 15pt;
color: #336699; }

h3
{ font-family: Calibri;
font-size: 14pt;
color: #336699; }

h4
{ font-family: Calibri;
font-size: 13pt;
color: #336699; }

Now the headers look like this:

It’s obviously very easy to change the elements for Headers (or anything else). Do note that all you’re doing is changing the CSS for the document you’re actively working on, and not globally. I have a feeling that option will show up soon.

Another steak in the heart of MSFT.

Tags: , , ,

  1. Laurie’s avatar

    Is there any way to make them non-bold?? I'm trying to fix my heading styles but only want a couple bold. I'm thinking google docs has a call that trumps my edits to heading styles. I even tried setting the css to font-style:normal; and that didn't cut it either. Any other ideas??

    Reply

  2. George Howard’s avatar

    These actually aren't bold; it's just what the font looks like. You could try a different font (just replace the word “Calibri” with the name of whatever font you want).

    Reply

  3. Rich’s avatar

    Try “font-weight: normal;”nnThat should do the trick.

    Reply

  4. George Howard’s avatar

    i think it’s gone with new google docs. drag.

    Reply

    1. James Welsh’s avatar

      Yes, Google removed the edit css and edit html functions. Bummer. these ere really nice for getting it to do just what you want, but now gone. 🙁

      Reply

Reply

Your email address will not be published. Required fields are marked *