SMALL CAPS PUNCTUATION ADVANCED TYPOGRAPHIC FEATURES IN SKETCH

Should be used for abbreviations and words set in uppercase inside the
body text so they blend in better. Make sure you dont use fake small caps. MINUS
-
HYPHEN

EN DASH

EM DASH
To use the OpenType typographic features in Sketch go to View > Show Fonts.
In the window that opens, click on the gear icon and choose Typography.

A a
Em Dash
REAL SMALL CAPS
The em dash can be used as an indicator of speaker in a narrative. Why
Ligatures
is typography important?. It can also be used as an indicator of a break.
CAPITALS SMALL CAPS FAKE SMALL CAPS
FAKE SMALL CAPS Proportional/tabular figures
Alt + 0 1 5 1 Opt Shift -

.class { WINDOWS MAC OS

font-variant-caps: all-small-caps;
Old-style or lining figures
font-feature-settings: "c2sc", "smcp"; En Dash
}
Its main purpose is to replace the word to, like 65 p.m.

Alt + 0 1 5 0 Opt -

FIGURE STYLES WINDOWS MAC OS

Change lowercase to small caps
Change all to small caps

Figure styles split into two main groups: old-style and lining figures.
Old-style are perfect for use inside body text as they blend in better. Hyphen
Its primarily used for hyphenating words, hence the name, and for
ab 1 2 3 4 5 6 7 8 9 AB 1 2 3 4 5 6 7 8 9 connecting two or more words together: five-dollar bills. LIGATURES
fi fl ff ffl ffi Th
OLDST YLE FIGURES LINING FIGURES

.class { Quotation Marks

COMMON LIGATURES
font-variant-numeric: oldstyle-nums / lining-nums; Make sure you use the correct curly quotation marks. Straight marks are for
font-feature-settings: "onum" / "lnum"; coding only. Common ligatures should be enabled for body text whenever available as they
} help improve the legibility. Enabled by default in most web browsers.

"Don't do this." Youre cool!

Lining figures further split into proportional and tabular figures. Tabular

figures align horizontally no matter the number. Theyre perfect for figures- DISCRE TIONARY LIGATURES
heavy documents where numbers need to align.
Discretionary ligatures are more ornamental in nature and should be used
Opt { Opt Shift { Opt } Opt Shift } with care.
$300 $300
$110 $110 .class {
MAC OS

font-variant-ligatures: discretionary-ligatures;
PROPORTIONAL TABUL AR Alt + 0 1 4 7 Alt + 0 1 4 8 Alt + 0 1 4 5 Alt + 0 1 4 6 font-feature-settings: "dlig";
.class { }
WINDOWS
font-variant-numeric: proportional-nums / tabular-nums;
font-feature-settings: "pnum" / "tnum";
} “ ” ‘ ’
CONTE X TUAL LIGATURES
HTML
More common in script typefaces, should be used to make the text look natural.

.class {

BETTER WEB TYPOGRAPHY FOR A BETTER WEB & + l/r + s/d + quo + ; font-variant-ligatures: contextual;
font-feature-settings: "calt";
betterwebtype.com LEF T/RIGHT + SINGLE/DOUBLE + QUOTATION MARKS
}
TYPE COLOUR AND WEIGHT TYPEFACE CLASSIFICATIONS TYPEFACE ANATOMY

Apex Apex
Arm ASCENDER LINE

Old Style Ascender Crossbar Bowl Vertical bar

CAP HEIGHT LINE

Tie X-HEIGHT LINE

The contrast of strokes is low, serifs are bracketed, the axis of curved strokes Stem Leg

MERRIWEATHER (14 4 px) BASKERVILLE (14 4px)

shifts to the left and the x-height is relatively small. Garamond is a great
example of this style. Serif Descender Horizontal bar
BASE LINE

DESCENDER LINE
Contrast
Contrast of different strokes is a major contributing factor to how heavy a
Transitional
typeface looks. Merriweather is a low contrast typeface and looks heavier The serifs are bracketed but the contrast is slightly higher. The axis of curved FONT WEIGHTS
than Baskerville which is a high contrast typeface. strokes is vertical. Baskerville is a typical typeface of this style.

Weight CSS
X-height
X-height (generally the height of the body of lowercase letters) also has a Neoclassical Thin font-weight: 100;
major role in how big and heavy a typeface looks. Typefaces with larger The contrast between thick and thin strokes is very high, the axis of curved
x-height are considered more modern and are generally easier to read. strokes is vertical and theres no bracketing for serifs. Bodoni is a great
example of this style.
Extra Light font-weight: 200;

Print vs Web Fonts

Light
Slab
font-weight: 300;
Printers can print in high-resolution of 300 DPI so typefaces meant for print
are designed differently from the ones designed for web. Generally, they are
more detailed and look lighter. Theres no bracketing on the serifs which are usually very heavy and theres Normal font-weight: 400;
no contrast between the thick and thin strokes. Roboto Slab is a very good
modern example of this style.
Medium font-weight: 500;

PRINT WEB
Clarendon Semi Bold font-weight: 600;

Serifs are usually very short and the contrast quite low. Clarendon and
Text vs Display Fonts Charter are typical examples.
Display fonts are meant to be used at larger sizes so theyll be more detailed
Bold font-weight: 700;

with higher contrast than the text font counterpart.

Grotesque Extra Bold font-weight: 800;

There is slight contrast noticeable in these typefaces and theres a certain

squareness associated with them. Helvetica is the most popular grotesque
style around.
Black font-weight: 900;

TE X T DISPL AY

Geometric
There is no contrast as the strokes seem to be uniform. These typefaces tend
FONT STYLES
This cheatsheet is based on the
to be less readable then the grotesques. Futura is the best known and a very
content from the Better Web popular geometric style. Normal Normal style.

Typography for a Better Web book Slanted version but with some characters having unique designs.
by Matej Latin. Humanistic
betterwebtype.com/book These styles usually match the design characteristics of the serifed typefaces Oblique Slanted version of the normal style. If there is no italic style but
you force it with CSS, the browser will slant the normal style
the contrast and axis of the curved strokes are noticeable. Gill Sans is a
(which is not desirable).
typical example.