In this post I am going to demonstrate how to configure Google Docs to be used to create web content. Although the final document could be shared to the web, in my case I will copy it to a CMS to handle those duties.
If you don’t already have a design, it is important to attend to those details first. Online users are quick to judge. Some say it takes about a half second for a user to form an opinion which is largely based on design. All designs have a font component and the fonts I selected are as follows.
In order to use a font it must be on the list of available fonts. Add to the list by selecting the font dropdown option. In addition to displaying available fonts, it also shows an option titled “More fonts”. Select this to add a new font from the Google font library.
As the final result will live as a web page, there is no need for pagination. To implement what Google calls a “Pageless” feature, complete the following steps.
(!) Tip: You can click Set as default to apply this setting to new documents.
Google categorizes text as follows.
Normal text is anything not categorized as one of the others. Post titles and subtitles are styled globally in the CMS and can not be changed from one post to the next. Those categories will be ignored. The block quotes are not directly supported in Docs but I have a work-around.
Docs support six header styles. To style them begin by creating a list using the normal text style as follows.
Header1
Header2
Header3
Header4
Header5
Header6
Select “Header1” and goto the style dropdown and select “Heading 1”.
Header2
Header3
Header4
Header5
Header6
With “Header1” selected, apply the other desired attributes. In my case I changed the font to “Roboto - medium weight”, the font height to “42px”, and the line height to 1.15 (115% of the font height).
With “Header1” still selected, click the styles drop down which now shows a check mark to the left of the menu item “Heading 1” and an arrow to the right. Move the cursor over this selection to expose additional options to the right and select “Update Heading 1 to match”. By doing this Google will remember your choice going forward.
Repeat this process and apply the desired styling to the remaining headers.
In addition to the above, I added italics to header 6. Things I could have changed but didn’t include font color and bold weight.
From the style drop down menu select “Normal text” and then create a sentence to style.
The quick brown fox jumped over the lazy dog.
Highlight the text and select the desired styling. In my case I set the font to Roboto (normal), the size to 13px, and the line height to 1.5 (150% of font size).
With the sentence still selected, click the styles drop down which now shows a check mark to the left of the menu item “Normal text” and an arrow to the right. Move the cursor over this selection to expose additional options to the right and select “Update Normal text to match”.
To begin, enter the block quote and if there is a citation enter it as well.
The greatest glory in living lies not in never falling, but in rising every time we fall.
Nelson Mandela
Select the text and click Format > Align & indent > Increase indent from the menu. While the quote is still selected, click Format > Paragraph styles > Borders & shading from the menu. This will display options which allow you to place a border around the text or change the background color.
Google Docs is a robust and powerful editing solution. At a minimum you get spell check, dictionary lookup, version control and AI enabled auto completion. It also supports collaborative editing.
Additional reading: