not just a pretty (type)face
DESCRIPTION
Enhance your content on the web with lovely typography. Covering, Open Type fonts, CSS Shapes, visual code and more...TRANSCRIPT
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