Designing for Amharic: Fonts, Unicode and Bilingual Layouts That Work

If your website serves Ethiopian readers, some of them will read it in Amharic. Getting Amharic text on screen sounds like it should just work, and often it does, until a visitor on an older phone sees empty boxes, a heading looks cramped, or a bilingual layout breaks because one language runs longer than the other. This guide covers the practical details: how Ethiopic text is encoded, how to choose and load fonts, how to set spacing and language attributes, and how to keep English and Amharic versions of a page consistent.

Unicode: the foundation

Amharic is written in the Ethiopic script (Ge'ez, or Fidel). It is part of the Unicode standard, mainly in the Ethiopic block (U+1200 to U+137F) with supplements for additional letters. Modern text should always be stored and sent as UTF-8.

• Declare UTF-8 in HTML with <meta charset="UTF-8"> as the first element in <head>.
• Send Content-Type: text/html; charset=utf-8 from the server, and make PHP output UTF-8.
• Create database tables with a UTF-8 character set, such as utf8mb4 in MySQL. SQLite uses UTF-8 by default.
• Use multibyte-aware string functions in PHP (mb_strlen, mb_substr) when counting or cutting text. Plain substr can cut a character in half and produce garbage.

// Safe truncation in PHP
$short = mb_substr($text, 0, 150, 'UTF-8');

If you see question marks or strange symbols instead of Amharic, the cause is almost always a mismatch somewhere in this chain: file encoding, HTTP header, database connection or column definition.

Choosing fonts that actually render

The browser can only show characters that exist in a font. Most modern phones and computers include an Ethiopic font, but not all, and the built-in ones vary in quality.

• Noto Sans Ethiopic is a widely used open font from Google Fonts that covers the script and pairs well with sans-serif Latin fonts.
• Abyssinica SIL is another open font designed for Ethiopic, with a more traditional look.
• System fonts such as Nyala on Windows may be used as fallbacks, but cannot be relied on everywhere.

Always provide a full font stack, with your Latin font first and an Ethiopic font after it, so each script uses the best available face:

body {
  font-family: 'Inter', 'Noto Sans Ethiopic', system-ui, -apple-system,
               'Segoe UI', Roboto, Arial, sans-serif;
}

If you load fonts from Google Fonts, the provider splits them by unicode range, so visitors download the Ethiopic file only when a page contains Ethiopic characters. This keeps English pages light. Add display=swap so text appears immediately in a fallback font. Check the licence of any font you self-host.

Spacing and size: Ethiopic needs more room

Ethiopic characters are visually dense and include marks that need vertical space. Text set with a tight line height that looks fine in English can feel crowded in Amharic.

• Use a generous line height, around 1.6 to 1.8 for body text.
• Avoid very small sizes. Test Amharic at 16px or larger for body copy.
• Be careful with letter-spacing, which is designed for Latin text; leave it at its default for Amharic.
• Avoid all-caps and italic styling, which do not exist in Ethiopic. Use weight, size or colour for emphasis instead, and do not fake italics.

Declare the language

Marking up language helps browsers choose appropriate fonts and hyphenation, helps screen readers pronounce text correctly and helps search engines understand the page.

<html lang="en">
...
<p lang="am">እንኳን ደህና መጡ</p>

<!-- A fully Amharic page -->
<html lang="am">

If you publish the same content in two languages, give each version its own URL and link them to each other with hreflang annotations, rather than switching language invisibly on one URL.

Line breaking and wrapping

Amharic uses a word separator, the Ethiopic wordspace (፡) in traditional text, though modern writing usually uses a normal space. Browsers break lines at spaces, so a long unbroken string, such as a URL, can overflow a narrow screen. Add these defaults to prevent layout breakage:

.prose, .card { overflow-wrap: anywhere; }
img, table { max-width: 100%; }

Numbers, dates and punctuation

• Numerals: most digital Amharic content uses Western digits (0 to 9). Ethiopic numerals exist but are rarely used in modern interfaces; choose one convention and apply it consistently.
• Punctuation: Amharic has its own full stop (።) and comma (፣). Use them in Amharic text rather than Latin punctuation, but do not mix them within a single sentence.
• Calendar: Ethiopia uses its own calendar, which differs from the Gregorian calendar. If you show dates, decide which calendar your audience expects, label it, and consider showing both for events and deadlines.
• Currency: write amounts consistently, such as "ETB 1,500", and keep the symbol or code beside the number in both languages.

Bilingual layouts that hold together

Text in different languages has different lengths and heights, so layouts designed around English can break.

• Avoid fixed heights on buttons, cards and menus. Let them grow with the content.
• Test with real text, not placeholder words. Translate your real headings and buttons and look at the result on a phone.
• Keep content structured per language, for example storing each field as {en, am} in the database, so editors can update both from one screen. See our church website case study.
• Provide a visible language switch, and remember the visitor's choice.
• Do not rely on machine translation alone. Have a fluent speaker review important pages, especially for payments, legal text and instructions.

Forms and input

Visitors may type in Amharic with a phone keyboard or a transliteration tool. Make sure forms accept it: use UTF-8 throughout, do not restrict names to Latin letters, and test saving and displaying Amharic text from end to end. If you validate input with a regular expression, include the Ethiopic range (\p{Ethiopic} with the u flag) rather than rejecting everything outside A to Z.

// PHP: allow letters from any script, including Ethiopic
if (!preg_match('/^[\p{L}\s\'-]{2,80}$/u', $name)) { /* reject */ }

Testing checklist

1. View every key page on an older Android phone and on a current one.
2. Check there are no empty boxes, question marks or broken characters.
3. Confirm the database stores and returns Amharic unchanged.
4. Check long headings and buttons wrap instead of overflowing.
5. Test form submissions with Amharic text.
6. Check titles and descriptions in search previews and when shared in messaging apps.
7. Ask a native reader to review the final text.