not just a pretty (type)face

Not just a pretty (type)face

!

!

@clare_lisbeth

Hi!

HTML ContentNative app

Create responsive templates

With variations

Why should I care?

Macro & Micro

layout visual code

text-align CSS shapes

Open Type Fonts glyph variants special characters text-stroke !

Macro

Layout

we got some good things from print…

… but some things are just better on the web

A Visual Code

Consistencyfor designers & developers

Hyphenation &

Justification

CSS Shapes

CSS Shapes

CSS Shapes

CSS Shapes

CSS Shapes

.shaped-element { shape-outside: url(images/tree.png); float: left; }

.shaped-element { shape-outside: polygon(0 0, 0 300px, 300px 600px); float: left; }

CSS Shapes - editor extension

CSS Shapes

Micro

Open Type Fonts

Readability

ff ffi fl fi Th

ff ffi fl fi

ff ffi fl fi

ffi fl fi

/* enable discretionary ligatures */

font-feature-settings: "dlig" 1;

/* enable small caps */

font-feature-settings: "smcp" on;

/* enable tabular numbers and historical forms */

font-feature-settings: "tnum", 'hist';

special characters & font-family

actually necessary to be able to read content

font-family: Crimson, Georgia, STIXMath, Times, "Times New Roman”, serif

accented characters

maths symbols body copy

fallbacks

older Android OS newer Android OS

text-stroke

InDesign vs CSS

-webkit-text-fill-color: white; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black;

So…

it’s tricky…

… but it’s getting better

!

Play to it’s advantages.

Thanks!

@clare_lisbeth