Basics
Typography
Poppins for English, IBM Plex Sans Arabic for Arabic, and a six-step scale shared by both. With no colour to lean on, type is what builds hierarchy in a Tomatico interface.
The two typefaces
Primary font — English
Poppins
Modern · Clean · Geometric
Used for all Latin text. A geometric sans built on near-perfect circles, which is exactly the logic of the Tomatico wordmark.
Primary font — Arabic
أبجد
Modern · Clear · Highly readable
IBM Plex Sans Arabic, used for all Arabic text. Chosen for readability at interface sizes and for how evenly it pairs with Poppins.
Both are open-source and free to use commercially, which matters for a system that has to work on the web, in apps and in documents without licence tracking. See Fonts for where to get them.
The type scale
Six steps, taken directly from the brand guidelines. Sizes are given as size / line-height in pixels, with letter-spacing as a percentage of the font size. The same numbers apply to both languages.
--tmt-size-h1 · .tmt-h1
Page titles, hero headlines
--tmt-size-h2 · .tmt-h2
Section titles
--tmt-size-h3 · .tmt-h3
Subtitles, card titles
--tmt-size-h4 · .tmt-h4
Highlights, small titles
--tmt-size-body · .tmt-body
Paragraphs, long content
--tmt-size-small · .tmt-small
Captions, notes, table cells
--tmt-size-caption · .tmt-caption
Derived step — metadata, badges, timestamps
The 12px caption is the only step this system adds to the brand's scale. Interfaces have labels, badges and table metadata that genuinely need to sit below 14px; without a defined step, people invent one. It is capped there — nothing in a Tomatico interface is smaller than 12px.
The scale in Arabic
Same sizes, same weights, same tracking. Two things change.
- Line height is more generous. Arabic has deeper descenders and stacked diacritics, so the system relaxes leading to 1.7 for Arabic text. Applying the Latin 24px line height to 16px Arabic clips marks.
- Letter-spacing is never positive. Arabic is a connected script;
adding tracking breaks the joins. The
--tmt-tracking-widetoken and the.tmt-eyebrowclass must not be applied to Arabic text.
عنوان رئيسي
عنوان فرعي
نص أساسي للفقرات والمحتوى الطويل. الطباعة عنصر أساسي في هويتنا، وهي تضمن الوضوح والاتساق وتجربة قراءة مريحة عبر جميع نقاط التواصل مع العلامة التجارية.
نص صغير للتعليقات والملاحظات.
<div dir="rtl" lang="ar">
<p class="tmt-h2">عنوان رئيسي</p>
<p class="tmt-body">نص أساسي للفقرات والمحتوى الطويل.</p>
</div>The lang attribute is what switches the typeface — it works
on any element, so a single Arabic name inside an English sentence renders in IBM Plex
Sans Arabic without any extra class.
Weights
Five weights are loaded: Light 300, Regular 400, Medium 500, SemiBold 600 and Bold 700. Every weight in the loaded set costs bandwidth, so the system deliberately stops there — no Thin, no ExtraBold, no italics.
| Weight | Token | Where it is used |
|---|---|---|
| 300 Light | --tmt-weight-light | Large display type only, above 32px. Never for body text. |
| 400 Regular | --tmt-weight-regular | Body, small text, captions. |
| 500 Medium | --tmt-weight-medium | Headings 3 and 4, buttons, labels, nav links. |
| 600 SemiBold | --tmt-weight-semibold | Heading 2, table headers, the current nav item. |
| 700 Bold | --tmt-weight-bold | Heading 1. Rarely anything else. |
Because there is no accent colour, weight is the main tool for emphasis. Use
<strong> for genuine emphasis in running text, and step
up the scale for structural emphasis. Do not use all-caps or letter-spacing for emphasis
in body copy — that is reserved for the eyebrow style.
Building hierarchy
Rules that keep pages consistent:
- One Heading 1 per page. It names the page and matches the browser title.
- Never skip a level for looks. The heading level is the document's
structure and screen readers navigate by it. If Heading 2 is too big, use the class for
a smaller step on an
<h2>— the classes and the tags are independent. - Cap the measure. Body text is limited to about 68 characters via
--tmt-measure. Lines longer than that lose the reader between the end of one line and the start of the next. - Space belongs above. A heading sits closer to the content it introduces than to the content it follows.
Do
- Use the approved fonts consistently.
- Maintain a clear hierarchy in every layout.
- Use the appropriate weight for each purpose.
- Keep enough contrast for readability.
Don't
- Use unapproved fonts.
- Mix more than the two approved typefaces.
- Stretch, condense or distort the fonts.
- Set body copy in Light, or in all caps.
Pairing the two faces
On a bilingual screen the two typefaces appear together, and they need to look deliberate rather than accidental.
- Keep both at the same size step. Do not bump Arabic up "to match" — IBM Plex Sans Arabic already reads slightly larger than Poppins at the same size.
- Align to the shared baseline; do not centre one against the other.
- Give each language its own direction context with
dir, so punctuation and numbers land correctly. See Bilingual and RTL.
Numbers
Use Western Arabic numerals (0–9) in both languages unless a client specifically requires
Eastern Arabic numerals (٠–٩). In tables and anywhere figures are compared down a column,
apply font-variant-numeric: tabular-nums — the
.tmt-numeric class does this and aligns to the inline end.