OpenType features

Slide 1

OPENTYPE FEATURES

Slide 2

FONT-FORMATE

Slide 3

TrueType (.ttf)
OpenType (.ttf, .otf)
EOT, WOFF , WOFF 2
Variable fonts

Slide 4

@font-face { font-family: ‘What The Font’; font-weight: normal; font-style: normal; src: url(‘wtf.eot’); src: url(‘wtf.eot?#iefix’) format(‘embedded-opentype’), url(‘wtf.woff2’) format(‘woff2’), url(‘wtf.woff’) format(‘woff’), url(‘wtf.ttf’) format(‘truetype’), url(‘wtf.svg#wtf’) format(‘svg’) }

Slide 5

WOFF Weg mit den ollen Font-Formaten!

Slide 6

Slide 7

LIGATUREN

Slide 8

COMMON LIGATURES
DISCRETIONARY LIGATURES

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Bei gebrochenen Schriften werden im Deutschen die Zwangsligaturen ch, ck, ſt und tz sowie der Buchstabe ß nicht aufgelöst. (Wikipedia: Sperrsatz)

Slide 14

Zahlen

Slide 15

oldstyle vs. lining proportional vs. tabular ordinal fractions subscripts slashed zero

Slide 16

font-family: Abril Text font-family: Abril Text; font-variant-numeric: lining-nums tabular-nums font-family: Abril Display; font-variant-numeric: lining-nums tabular-nums

Slide 17

Slide 18

Slide 19

Slide 20

STILISTISCHE & LOKALE VARIANTEN

Slide 21

Stylistic alternates & stylesets
Swashes
Localized forms

Slide 22

Slide 23

Slide 24

Slide 25

@font-face { font-family: ‘What The Font’; font-weight: normal; font-style: normal; src: url(‘wtf.woff2’) format(‘woff2’); } @font-face { font-family: ‘What The Font’; font-weight: normal; font-style: italic; src: url(‘wtf-italic.woff2’) format(‘woff2’); }