Choosing Fonts for Your Website, eBook, Mobile App. Presented at the 2010 MIMA Summit in Minneapolis, MN

1. wide
open
faces

2. Choosing Fonts
&
for Your
Website,
eBook,
Mobile App

3. “Garrick’s
not a typographer,
nor a font salesman.
He’s a facilitator,
a proponent of an open web”
- Tom Michlig

4. a piano
with only
five keys

5. sIFR(etc - Flash)
Cufon(etc - Javascript)
Text-as-Image

6. O R
sIFR T F
O D
N O Y
Cufon PY
B
C O
Text-as-Image

7. @font-
face {}

8. brand-consistent,
maintainable,
future-proof,
SEO-able,
compatible.

9. whoisrossbrown.com - Paul Lloyd’s Hominis & John Stracke’s Essays

10. fontconf.com - Titillium, League Gothic, Acknowledgement

11. minnpost.com
Sertig

12. garrickvanburen.com - Steinem, Ikarius, Paneuropa

13. shortformblog.com - Chunk

14. @font-face {
font-family:‘League Gothic’;
src: url(‘http://kernest.com/embed/league-gothic.otf’);
}
p {
font-family:‘League Gothic’;
}

15. Font
Formats

16. .OTF / .TTF
opentype / truetype

17. .SVG
scalable vector graphics

18. .EOT
embedded open-type

19. .WOFF
web open font format

20. @font-face {
font-family: 'League Gothic';
src: url('http://kernest.com/embed/league-
gothic.eot');
src: local('://'), url('http://kernest.com/embed/
league-gothic.svg#league_gothic') format('svg'), url
('http://kernest.com/embed/league-gothic.woff') format
('woff'), url('http://kernest.com/embed/league-
gothic.otf') format('opentype');
}
p {
font-family:‘League Gothic’;
}

21. @font-face {
font-family: 'League Gothic';
src: url('http://kernest.com/embed/league-gothic'),
url('http://kernest.com/embed/league-
gothic.svg#league_gothic') format('svg') ;
}
p {
font-family:‘League Gothic’;
}

22. Do You
Have a
License?

23. Do You
O
Have a.
N
License

24. Web-
Friendly
Font
Licenses.

25. Open Font
License
sil.org
kernest.com/ofl
- commercial use
- redistribution
- derivative works

26. Acknowledgement
A
was a quick f
project, whi
wanted to
complete in t
r to give a cop
the result to
friend to
commemorat

27. League Gothic / League Ghotic Extended
g League Gothic is a revival of an old
and one of our favorite typefaces, A
Gothic No.1. It was originally design
0 Morris Fuller Benton for the Americ
Founders Company (ATF) in 1903. Th
company went bankrupt in 1993. An
the original typeface was created b

28. PT Sans
K
PT Sans family was developed as a
the project “Public Types of R
Federation”. The fonts of this projec
open user license and can be
l
distributed. The main aim of the pr
to give possibility to the peop
Russia to read and write on
native languages. The proj
dedicated to 300-year anniversary
civil type invented by Peter the G

29. Titillium
g The aim of the project is the creation of a
collective fonts released under OFL to be
promoted and shared through a web platf
Each academic year, a dozen of
y
students are working on the proje
developing and solving problems.
The type designers interest
the amendment or revisio
Titillium are invited to coop
or develop their own varian

30. GNU General
Public License
gnu.org/licenses
kernest.com/gpl
- commercial use
- redistribution
- derivative works

31. Electrum
E
J'étais bien loin d'imaginer que la réa
ce caractère prendrait autant de temp
les premiers dessins mis en ligne fin
a
De même, j'ai profité de ce
réalisation pour fixer les sc
opentypes liés aux indices
dérivés parfois utilisés en
publication. L'objectif était

32. Mekanus
K
La famille de police Mekanus est née d'u
de style ayant pour objet de combiner u
typewriting et courbes qui rappellent l'é
Durant le developpement, elle a été empat
f
manière à embellir le rendu initial. Avec le
elle a été étendues avec de nombreuses liga
servirent à écrire le script opentype, ainsi
placement PUA de manière à pouvoir
incorporées dans les polices postscrip

33. Ikarius
ß
Les polices Ikarius utilisent des hauts
caractères épaißis et droits par rappo
et se caractérisent également par un s
pour les bas de caße. Elles sont deßin
k
manière à offrir un rendu visuel équili
utilisables à la fois pour le texte et le t
Ikarius poßède un espacement reßerré
un aspect légèrement condensé. Dans
version les caractères « v, y, w » ont d
la partie supérieure comme les autres
de la police. La barre inférieure de l'œ

34. a
Cantarell
“The Cantarell is a contemporary Human
designed for on-screen reading; in parti
web pages on an HTC Dream mobile ph
device runs Google Android and therefo
f
browser supporting the exciting new we
known as @font-face.
As my very first typeface design, th
has many faults, yet it achieves the
improving readability on this device
- David Crossland

35. X11 / MIT License
en.wikipedia.org/wiki/Mit_license
kernest.com/licenses/x11-license
- commercial use
- redistribution
- derivative works

36. CMU Serif Upright Roman
&
Computer Modern Unicode fonts were c
metafont sources using mftrace with aut
backend and fontforge (former pfaedit).
purpose is to create free good quality fon
X applications supporting many languag
k
the fonts contain glyphs from Latin1 (M
vnr), Cyrillic (lh) and Greek (cbgreek w
code sets and IPA extensions (from tipa
alphabets are also welcome. Now this se
fonts. It is better to use these fonts with
enabled.

37. CMU Concrete
A
Computer Modern Unicode fonts were co
metafont sources using mftrace with auto
and fontforge (former pfaedit). Their mai
create free good quality fonts for us
k
applications supporting many languages.
fonts contain glyphs from Latin1 (Metafo
Cyrillic (lh) and Greek (cbgreek when av
and IPA extensions (from tipa). Other alp
welcome. Now this set contains 33 fonts.
use these fonts with antialiasing enabled.

38. CMU Sans Serif
G
Computer Modern Unicode fonts were convert
metafont sources using mftrace with autotrace
fontforge (former pfaedit). Their main purpose
free good quality fonts for use in X applicat
a
supporting many languages. Currently the font
glyphs from Latin1 (Metafont ec, tc, vnr), Cyr
Greek (cbgreek when available) code sets and
(from tipa). Other alphabets are also welcome
contains 33 fonts. It is better to use these fo
antialiasing enabled.

39. Web Native
hi
low
openly stroke
licensed contrast
large
x-height
open
counter
kernest.com/web-native

40. free
as in
Freedom

41. league gothic
202 glyphs

42. “We all love League Gothic font
from theleagueofmoveabletype.com
So I extended this famous and
awesome font...”
http://typethefont.com/post/798257771/league-ghotic-extended

43. league gothic league ghotic extended
202 glyphs 321 glyphs

44. Where to
find open
fonts

45. OpenFontLibrary.org
87 fonts all 100% open

46. FontSquirrel.com/FontFace
lots of fonts ready for
use - check the licenses.

47. Kernest.com
700 openly licensed fonts
categorized by license &
freedom.

48. Let’s Keep
Talking
garrick@kernest.com
Brought to you with:
CMU Serif Upright Italic & Providence