[an error occurred while processing this directive] Skip Menu

Phonetic Transcription for the Web

Page Content

  1. Phonetic Fonts for Unicode
  2. Test Text and Browsers
  3. Input Palettes
  4. Phonetics Keyboard Utilities
  5. Web Development
  6. Other Links

Other Pages on Phonetics

  1. Numeric Entity Codes (New Page)
  2. Numeric Entity Codes for Vowel Diacritics
  3. Mac OS X Extended Keyboard Accent Codes
  4. Windows Character Map
  5. Mac Character Palette
  6. Non-Unicode Work Arounds

Phonetic Fonts for Unicode

The following Unicode fonts include a comprehensive set of phonetic characters and are free for academic use.

Text Text for Browsers

IPA Unicode Test Text

θɪs ɪz ə ənʌðər tɛst

Note on Encoding and Fonts

If these sites are not displaying correctly, see the Browser Setup page for set up information.

It's important that your browser encoding be set to display Unicode (UTF-8). In some cases, you may need to set the default font to one that includes phonetic characters.

Input Palettes For Phonetics

These programs provide a pop-up window which allows you to insert different phonetic characters. See pages for installation and usage instructions.

You can also use

Get Phonetics Keyboards

If you need to type phonetic symbols often, you may want to install phonetic keyboard utilities designed to work with the SIL Doulos and SIL Charis fonts.

Web Development

This section presents information specific to Spanish. For general information about developing non-English Web sites, see the Encoding Tutorial or the Web Layout sections.

Declare Unicode

No matter which method you use to create the document, the HTML page must be declared as a Unicode page with the following meta-tag.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
...
</head>

Unicode Numeric Entity Codes

If you cannot use a Unicode phonetics input utilitiy or keyboard, then you can substitute numeric entity codes instead. For example:

See the Main Numeric Entity Code Chart and the Diacritic Chart for details.

Specifying Phonetic Font Styles

Although it is generally not recommended to specify fonts for a language, it may a good option to make display consistent across browsers.

Below are the CSS style classes listing some suggested font specifications.

.serifipa {font-family: "Doulos SIL", "Gentium", "Junicode", "Cardo", "Aborigonal Serif","Arial Unicode MS"}

.ipa {font-family: "Lucida Grande","Arial Unicode MS"}

Third Party Fonts

The following fonts are availble free for educational use and include all encoded phonetic symbols.

IPA Unicode Char Maps/Palettes and Keyboards

These keyboards can either be used to type text into an HTML editor or cut and pasted from a text editor. See the Web tips section for more details.

Windows

Macintosh OS X

Online Keyboards

These utilities let you type a character on a virtual keyboard, then cut and paste the symbols into a document.

Phonetics in HTML

[an error occurred while processing this directive]

Top of Page

Last Modified: Monday, 26-Jun-2017 11:17:41 EDT