The Art of Typography

Why is Typography the Most Important Element in Design?

If you removed every image, icon, and color from any app or website, you'd find that 95% of the content is text. Text is the primary way users interact with a product — they read instructions, understand buttons, and browse content.

Typography is not just about choosing a nice font. It's a complete system that includes:

• Choosing the right typefaces
• Defining sizes and weights
• Adjusting line spacing and letter spacing
• Building a clear visual hierarchy
• Ensuring readability on every device

Excellent typography is invisible — the user reads the content smoothly without feeling any effort. Poor typography makes the user feel fatigued and abandon the app.

Type Anatomy

Before choosing fonts, you need to understand the basic terminology:

Latin Typography Terms

• Baseline: the line that characters sit on
• X-height: the height of lowercase letters (like x)
• Cap height: the height of uppercase letters
• Ascender: the part that rises above the x-height (like the letter b)
• Descender: the part that drops below the baseline (like the letter g)
• Serif: the small projections at the ends of letterforms
• Kerning: the spacing between two specific characters
• Leading: the spacing between lines
• Tracking: the uniform spacing between all characters

Arabic Typography Terms

Arabic fonts have different characteristics:

• The baseline is not always straight — Arabic letters move above and below
• Dots and diacritical marks require additional space above and below the letters
• Letter connections affect width and shape
• Line height in Arabic needs to be greater than in Latin due to dots and diacritics

Font Classifications

Serif Fonts

Fonts with small projections at the ends of letterforms. They convey classicism, formality, and credibility. Examples: Times New Roman, Georgia, Merriweather.

In Arabic, Naskh fonts are the equivalent — suitable for long-form reading and formal content.

Sans-Serif Fonts

Fonts without serifs — clean and modern. They are the first choice for digital interface design because they are clear on screens. Examples: Inter, Roboto, SF Pro.

In Arabic, modern Kufi-style fonts are the equivalent — such as Noto Kufi Arabic, IBM Plex Arabic, and Cairo.

Monospace Fonts

Every character takes up the same width. Used for code and technical data. Examples: Fira Code, JetBrains Mono.

Display Fonts

Distinctive fonts designed for large headings only — not for body text. They are expressive and unique. Use them sparingly and at large sizes.

Typographic Hierarchy

Typographic hierarchy allows the user to understand the order of information without thinking. You create it by manipulating:

1. Size

The difference in size is the most powerful tool for building hierarchy:

• Display/Hero: 48-72px — for major page headings
• H1: 32-40px — page title
• H2: 24-30px — section headings
• H3: 20-24px — sub-headings
• Body: 16-18px — regular text
• Small: 12-14px — helper text and captions
• Caption: 10-12px — the smallest acceptable text

Important rule: The difference between each level must be clear — at least 4px difference or a 1.25x ratio between levels.

2. Weight

Font weights range from Thin (100) to Black (900):

• Regular (400): for body text
• Medium (500): for elements that need to stand out slightly
• SemiBold (600): for sub-headings and buttons
• Bold (700): for main headings and important elements

Tip: Don't use more than 3 weights in a single design. Too much variety is distracting.

3. Color

Not all text needs to be the same color:

• Primary text: dark and clear (contrast ratio 7:1 or higher)
• Secondary text: medium gray (for dates and descriptions)
• Disabled text: light gray (for unavailable elements)

Font Selection

Font Selection Criteria

When choosing a font for your project, consider:

1. Readability: Is the font clear at small sizes? Are similar characters distinguishable (I, l, 1)?
2. Multiple weights: The ideal font should have at least 4 weights (Regular, Medium, SemiBold, Bold)
3. Language support: If the product is bilingual, the font must support both Arabic and Latin
4. Performance: Font file size affects loading speed. Google Fonts are well-optimized
5. Licensing: Make sure the font is free for commercial use or you have a license

Recommended Arabic Fonts for UI

• Noto Kufi Arabic: From Google — modern and clean, multiple weights, excellent for interfaces
• IBM Plex Arabic: Professional design, supports technical writing
• Cairo: Modern Egyptian font, suitable for headings and body text
• Tajawal: Clean and calm Saudi font
• Readex Pro: Designed specifically for digital reading

Recommended Latin Fonts for UI

• Inter: The most popular font in interface design — designed specifically for screens
• SF Pro / SF Arabic: Apple's official font — not available outside Apple products
• Roboto: Google's default font — clear and versatile
• DM Sans: Elegant geometric font — suitable for modern applications

Font Pairing

Using two fonts together gives the design variety and depth. But there must be contrast with harmony.

Pairing Rules

1. Serif + Sans-Serif: The safe classic combination — Serif for headings and Sans-Serif for body or vice versa
2. Same family: Use different weights from the same font — the easiest approach and it always works
3. Clear contrast: If the two fonts look too similar, the user will sense an error rather than intentional design
4. Maximum two fonts: In most UI projects, one font with different weights is sufficient. If you need two, that's the maximum

Proven Combinations

• Cairo (headings) + Noto Kufi Arabic (body): An excellent Arabic combination
• Inter (headings) + Noto Sans Arabic (body): For bilingual projects
• A single font only: Inter or Noto Kufi Arabic with different weights — simpler and more consistent

Arabic Fonts — Special Challenges

Designing Arabic interfaces has unique challenges you need to be aware of:

Reading Direction (RTL)

Arabic text is read from right to left. This doesn't just affect the text — it affects the entire layout:

• Menus and buttons are mirrored
• Directional icons (arrows) must be flipped
• Phone numbers and dates remain left to right

Line Height

Arabic fonts need a larger Line Height than Latin (1.7 - 2.0 instead of 1.5). This is because the dots and diacritical marks above and below the letters need space.

Font Sizes

Arabic fonts appear smaller than Latin fonts at the same size. You may need to increase the size by 1-2px in the Arabic version.

Mixed Content

When you have Arabic text with English words or numbers, the font needs to handle bidirectional text (BiDi) properly.

Spacing and Fine Details

Line Height

• Headings: 1.1 - 1.3 (less space because headings are short)
• Body text: 1.5 - 1.75 (comfortable spacing for reading)
• Arabic text: 1.7 - 2.0 (more space because of dots)

Line Length

The ideal reading line is 50-75 characters in Latin and 40-60 characters in Arabic. A line that's too long makes the eye get lost when returning to the start of the next line.

In web design, this means the text column width must be limited — not full screen width. max-width: 65ch is an excellent rule.

Letter Spacing

• Large headings: can slightly reduce spacing (letter-spacing: -0.02em) to appear tighter
• Body text: leave as-is — a well-designed font doesn't need adjustment
• ALL CAPS text: increase spacing (letter-spacing: 0.05em) to make it readable

Common Typography Mistakes

1. Too Many Sizes

If you have 10 different sizes in a design, the user won't be able to distinguish the hierarchy. 5-7 sizes is enough.

2. Weak Contrast

A heading must clearly look like a heading — not just be 2px larger than body text.

3. Lines That Are Too Long

Text that stretches the full screen width is very fatiguing. Limit your column width.

4. Ignoring the Arabic Font

If the project is in Arabic, don't rely on a Latin font that supports Arabic as a secondary feature. Choose an Arabic font as the primary font.

5. Too Many Fonts

Two fonts is the maximum. Every additional font affects performance and visual consistency.

Practical Exercise

Design a complete Type Scale for an Arabic project:

1. Choose one Arabic font from the list above
2. Define 6 sizes (Display, H1, H2, H3, Body, Small)
3. Choose 3 weights (Regular, SemiBold, Bold)
4. Set the Line Height for each size
5. Design a mock article page using all the levels
6. Check readability on both mobile and desktop

When you do this, you'll find that typography alone builds 80% of the design's look — even before you add any colors or images.