Font families

Sans and Serif font families with a custom ones for RTL text (Naskh & Nastaliq). You may use any font of your choice by updating the corresponding token in Figma variables or the fontFamily in Tailwind config.

Open Sans

Sans style, default for most applications.

Preview

The quick brown fox jumps over the lazy dog. 0123456789 !@#$%^&*() — “A journey of a thousand miles begins with a single step.”

<div class="text-2xl font-sans">The quick brown fox jumps over the lazy dog. 0123456789 !@#$%^&*() — “A journey of a thousand miles begins with a single step.”</div>

EB Garamound

Serif style suitable for a more stylized and official feel.

Preview

The quick brown fox jumps over the lazy dog. 0123456789 !@#$%^&*() — “A journey of a thousand miles begins with a single step.”

<div class="text-2xl font-serif">The quick brown fox jumps over the lazy dog. 0123456789 !@#$%^&*() — “A journey of a thousand miles begins with a single step.”</div>

Nafees

Naskh style recommended for most local languages such as Urdu, Sindhi, Pashto etc for better readability at smaller sizes.

Preview

“سُرخ چمگادڑ تیز ہوا میں اُڑتے ہوئے نیلے آسمان کے نیچے جا پہنچا۔ ۰۱۲۳۴۵۶۷۸۹ !@#$%^&*() — “سفر ہزار میل کا ہوتا ہے، مگر پہلا قدم ہی سب سے اہم ہوتا ہے۔”

<div class="text-2xl font-naskh text-right">“سُرخ چمگادڑ تیز ہوا میں اُڑتے ہوئے نیلے آسمان کے نیچے جا پہنچا۔ ۰۱۲۳۴۵۶۷۸۹ !@#$%^&*() — “سفر ہزار میل کا ہوتا ہے، مگر پہلا قدم ہی سب سے اہم ہوتا ہے۔”</div>

Gulzar

Nastaliq style for a traditional look in Urdu.

Preview

“سُرخ چمگادڑ تیز ہوا میں اُڑتے ہوئے نیلے آسمان کے نیچے جا پہنچا۔ ۰۱۲۳۴۵۶۷۸۹ !@#$%^&*() — “سفر ہزار میل کا ہوتا ہے، مگر پہلا قدم ہی سب سے اہم ہوتا ہے۔”

<div class="text-2xl font-nastaliq text-right">“سُرخ چمگادڑ تیز ہوا میں اُڑتے ہوئے نیلے آسمان کے نیچے جا پہنچا۔ ۰۱۲۳۴۵۶۷۸۹ !@#$%^&*() — “سفر ہزار میل کا ہوتا ہے، مگر پہلا قدم ہی سب سے اہم ہوتا ہے۔”</div>