HTML Editor: Font Styles

1. About: Fonts

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.

HTML editor with font tools circled

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.

Close

2. Add: Headers

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.font drop down menu

     

  3. Select the appropriate level of heading.heading options in menu

     

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

     

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

Close

3. Add: Bold Type, Italics, or Underlines

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.bold, italic, and underline buttons

     

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

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

Close

4. Add: Strikethrough, Subscript, or Superscript

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).text formatting menu
  3. Select the option you want from the menu.open text formatting menu

     

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

5. Add: A Symbol

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.insert quick link menu

     

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

     

  4. Click the Create button.create button

     

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

6. Change: Font Color

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.font color button

     

  3. Click on the color you wish to use.color menu

     

  4. Use the slider to change the contrast.slider
  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.checkmark

     

  6. Click the Save button.save button

     

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

Back to Top