HTML Editor: Font Styles

The HTML Editor works similarly to a word processing program, with similar built in tools for formatting your text, creating headers, and adding bullets, numbered lists, horizontal lines, subscripts, superscripts, and more. This page describes the font tools.

Note: If you paste text into the HTML Editor, choose the option to remove formatting. Then, use the built-in tools to format your content. This will prevent formatting problems and facilitate screen readers.

Note: We recommend using the default font style and size. This ensures that users with visual impairments can customize their fonts, including using OpenDyslexic and Huge font types. For instructions on customizing fonts, visit our Account Settings help page.

Headers do double-duty. They add formatting and they provide an index for screen-readers. With headers, visually-impaired people do not have to start at the top and read through all of the text every time they want to access something on a page.

Note: Headers hierarchically organize content. Think about the organization of a book: a Header 1 would be the book title; a header 2 would be a chapter title; a header 3 would be a section; a header 4 would be a sub-section, and so forth. 

1. Click anywhere on the line of text you wish to format.
2. Click on the format dropdown-menu to open it.

    

3. Select the appropriate level of heading.

    

4. When you are finished, use the Publish (or Update) button to save your work.

    

Note: To remove a heading, follow the same steps but select the "paragraph" option from the menu.

When it comes to adding bold, italics and underlines, the HTML editor works similarly to a word processing program.

1. Highlight the text you wish to format.
2. Click the button(s) to bold, italicize, and/or underline your text.

    

3. When you are finished, use the Publish (or Update) button to save your work.

Note: If you prefer, in lieu of step 2, you can use shortcut keys (e.g. Ctrl+B, Ctrl+I, Ctrl+U)

You can add strikethrough text and sub- or super-script.

1. Highlight the text you wish to format.
2. Click the text formatting down-arrow (right of the underline button).
3. Select the option you want from the menu.

    

4. When you are finished, use the Publish (or Update) button to save your work.

The Quicklink dropdown menu allows you to embed special characters and symbols into your text.

Note: Mathematical equations and characters are inserted using a different HTML Editor tool. Learn more by visiting our Math and Scientific Expressions help page.

1. Place your cursor where you want to insert the symbol. 
2. Click on the Insert Quicklink dropdown menu and select Insert Symbol.

    

3. In the "Select Symbol" box, click on the symbol you want to insert.

    

4. Click the Create button.

    

5. When you are finished, use the Publish (or Update) button to save your work.

Use the toolbar to change the color of your font.

1. Highlight the text you wish to change.
2. Click on the Font color tool to open the menu of options.

    

3. Click on the color you wish to use.

    

4. Use the slider to change the contrast.
5. Make sure you see a checkmark next to the text "WCAG AA". If you see a "cross" icon, your text might be illegible or invisible to some users.

    

6. Click the Save button.

    

7. When you are finished, use the Publish (or Update) button to save your work.

Building a table requires multiple steps.

Note: When it comes to tables, simpler is better.

To ensure that your table is accessible to as many students as possible, proceed in this order:

Step 1: Create the Table

1. Click the Table Button and select Insert Table.
2. Highlight the number of cells you would like in your table.

    

3. Click on the last cell to insert your table.
    

    

Note: You can track the number of columns by rows you have selected.
 

Step 2: Add Your Content

Note: Because the cells are collapsed, it can be difficult to navigate an empty table. The easiest way to move around your table is to use your keyboard. The Tab key will move you to the next cell. Arrow keys will move you in any direction.

1. Navigate to an empty cell.
2. Add your content.

Note: The table will resize to fit your content.
 

Step 3: Format the Headers

Note: Important! This step is critical. Do not skip it!

1. Click the cell you wish to format.

    

2. Click the Table Icon.
3. Select Cell
4. Select Cell Properties from the list.
   

    

5. For "Cell Type", select Header cell.
6. For "Scope", select:  (if you have column headers nested under this header).
   • Row (if you have one header per row).
   • Column (if you have one header per column).
   • Row Group (if you have row headers nested under this header).
   • Column Group (if you have column headers nested under this header).
7. Repeat this process for every column and row header in your table.

Note: The cell will be formatted for you. Do not add bolding, underlines, or other aesthetic elements to make your headers stand out, unless there is a compelling reason to do so.