Hero Layout

Type with Purpose

Good typography guides attention, improves understanding, and makes communication effortless.

Get Started Learn More

Article Preview

The Anatomy of a Typeface

By FontSide · June 2026

Every typeface is a system of decisions — about stroke contrast, x-height, spacing, and rhythm. The best ones feel invisible: you stop seeing the letters and start hearing the voice behind them. That transparency is the hardest thing to design.

A high x-height opens up the counters and makes small text breathe. Tight tracking pulls a headline together; loose tracking gives a caption room to exhale. None of these choices are accidents — they are arguments about how reading should feel.

Specimen Scale

Preview Text

Weights

72px

The quick brown fox jumps over the lazy dog

48px

The quick brown fox jumps over the lazy dog

36px

The quick brown fox jumps over the lazy dog

24px

The quick brown fox jumps over the lazy dog

18px

The quick brown fox jumps over the lazy dog

14px

The quick brown fox jumps over the lazy dog

Character Map

Uppercase

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

Lowercase

a

b

c

d

e

f

g

h

i

j

k

l

m

n

o

p

q

r

s

t

u

v

w

x

y

z

Numerals

0

1

2

3

4

5

6

7

8

9

Symbols

!

?

.

,

;

:

—

…

“

”

‘

’

(

)

[

]

{

}

/

\

@

#

$

%

&

*

+

−

=

Regular 400 Italic Amsterdam

Regular 400 Barcelona

Configuration

Select the weights and styles you want to include in your project.

Styles

Package Manager

The recommended way to use fonts in modern web projects.

1. Install Package

pnpm add @fontsource/xanh-mono

2. Import in App

// Please select at least one weight and style

3. CSS Usage

body {
  font-family: "Xanh Mono", monospace;
}

Google Fonts CDN

Use Google's CDN to embed the fonts directly via HTML.

HTML <head>

<!-- Please select at least one weight and style -->

Fontsource CDN

Skip the build step by adding this directly to your global CSS file.

Global CSS

/* Please select at least one weight and style */

Background & Story

Xanh Mono is a mono-serif typeface, designed by Lam Bao and Duy Dao. In Vietnamese, “Xanh” has a lot of meanings, including blue; green; young; etc. We believe that Xanh Mono will not only present a fresh and gentle look, but also a stylish and unique approach for both reading and display purposes.

Xanh Mono là một mặt chữ mono có chân, được thiết kế bởi Lâm Bảo và Duy Đào từ xưởng đúc chữ kĩ thuật số đầu tiên tại Việt Nam, còn được biết đến là Yellow Type Foundry. Xanh Mono theo sự lắng đọng, nhẹ nhàng nhưng vẫn đủ cá tính để vừa sử dụng cho trải nghiệm đọc và tiêu đề lớn.Bảo và Duy hy vọng Xanh Mono sẽ là sự lựa chọn phông chữ tuyệt vời dành cho bạn.

To contribute see https://github.com/yellow-type-foundry/xanhmono.

Tags & Moods

VintageMonospaceModern

Subsets

latinlatin extvietnamese

Xanh Mono