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 Amsterdam

Package Manager

The recommended way to use fonts in modern web projects.

1. Install Package

pnpm add @fontsource/vt323

2. Import in App

// Please select at least one weight and style

3. CSS Usage

body {
  font-family: "VT323", 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

This font was created from the glyphs of the DEC VT320 text terminal, which I used in college, and for which I have retained an unaccountable nostalgia.

I used a variety of tools, including Gimp, Python/PIL, and of course, FontForge. The VT320 glyphs were designed with a nonrectangular pixel aspect ratio to fit the way the terminal scanned the CRT, so for this VT323 variation I had Python munge the locations and attempt to emulate the way the electron beam actually illuminated the phosphor and smeared the pixels horizontally on the terminal's CRT, so it looks more like what the actual glyph looked like on the screen. Python then drew the proper pixels into a 1:1 pixel grid as a monochrome PNG, which FontForge autoscanned into outlines. I have attempted to support most of the glyphs available on the VT320, but that is a limited set to begin with, so please don't be disappointed that I haven't supported Esperanto or Riograndenser Hunsrückisch or whatever.

There is another earlier variation called "VT321" that uses a more standard 1:1 pixel drawing technique, if you want to grab that as well. I personally like VT323 better, and actually use it as my terminal font when cruising on the command line.

Tags & Moods

LoudStiffVintageMonospaceTechno

Subsets

latinlatin extvietnamese

VT323