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

!

?

.

,

;

:

—

…

“

”

‘

’

(

)

[

]

{

}

/

\

@

#

$

%

&

*

+

−

=

Extra Light 200 Italic Amsterdam

Extra Light 200 Barcelona

Light 300 Italic Casablanca

Light 300 Dublin

Regular 400 Italic Edinburgh

Regular 400 Frankfurt

Medium 500 Italic Geneva

Medium 500 Helsinki

Semi Bold 600 Italic Istanbul

Semi Bold 600 Jakarta

Bold 700 Italic Kyoto

Bold 700 London

Extra Bold 800 Italic Moscow

Extra Bold 800 Nairobi

Black 900 Italic Osaka

Black 900 Paris

Package Manager

The recommended way to use fonts in modern web projects.

1. Install Package

pnpm add @fontsource-variable/source-code-pro

2. Import in App

import '@fontsource-variable/source-code-pro/wght.css';

3. CSS Usage

body {
  font-family: "Source Code Pro Variable", 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

/* source-code-pro-latin-wght-normal */
@font-face {
  font-family: "Source Code Pro Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/source-code-pro:vf@latest/latin-wght-normal.woff2)
    format("woff2-variations");
}

Background & Story

Source Code was designed by Paul D. Hunt as a companion to Source Sans.This complementary family was adapted from the Source design due to a request to create a monospaced version for coding applications. Source Code preserves the design features and vertical proportions of Source Sans, but alters the glyph widths so that they are uniform across all glyphs and weights.

Although this family was designed specifically for coding environments, for which a regular weight will typically suffice, Source Code has been made available in the same weight range as the corresponding Source Sans design.Source Code Pro currently supports a wide range of languages using the Latin script, and includes all the characters in the Adobe Latin 4 glyph set.

As an open source project, it is expected that incremental updates will be made over time to extend glyph set coverage and functionality. In 2019, we have updated the family to Roman v2.030 and Italic v1.050. This update now supports Greek, Cyrillic, Vietnamese and Italic styles.

To contribute, see github.com/adobe-fonts/source-code-pro.

Tags & Moods

CalmLoudRuggedSincereMonospaceHumanistVariable

Subsets

cyrilliccyrillic extgreekgreek extlatinlatin extvietnamese

Source Code Pro