This document discusses font creation and Prototypo, an open-source web app for streamlining font design. It presents information on building typefaces using systems and coding recurrences, and describes Prototypo's use of outlines, skeletons, and small extendable APIs to manipulate font components through operations like rotation, expansion and distribution. Prototypo aims to make font design more accessible and its developers discuss potential future additions like alternate glyphs and individualization tools.

1. http://fontforge.github.io/en-US/
Prototypo
streamlining font creation

2. http://fontforge.github.io/en-US/
13 x _
@_____________y @Louis_Remi

3. Graphic designer
+
http://fontforge.github.io/en-US/
Type design

4. NO.
http://fontforge.github.io/en-US/
Build a typeface
OKAY, BUT…

5. Alphabet have recurrences.
Recurrences are led by systems.
http://fontforge.github.io/en-US/
Systems can be coded.

6. http://fontforge.github.io/en-US/
PimpMySerif — 2009

7. http://fontforge.github.io/en-US/

8. http://fontforge.g ithub.io/en-US/
Albrecht Dürer’s visualisation of the contemporary broken-script
construction (Nuremberg, 1525). — www.ilovetypography.com

9. Of the Just Shaping of Letters by Albrecht Dürer — www.gutenberg.org
http://fontforge.g ithub.io/en-US/

10. Translation + expansion + rotation
http://fontforge.github.io/en-US/
www.zigzaganimal.be / The Stroke — Gerrit Noordzij

11. % placement vertical stem (left) and stem width
shl := 2.25pt;
sw := 3.33pt;
% serif end angle and width and height above bottom
% and prev height
sea := 105;
sew := 0.025h;
seb := 0.10h;
sdy := 0.075h;
% initial angles
a := 30;
ar := a+180-15;
% hor shift
w0 := w-1pt;
x0 := 0.5pt;
% define points
x1 = x0-0.05w0; y1 = 0.86h;
x2 = x0+0.6w0; y2=h-pt;
x4 = x5 = x8 = x0+w0-shl;
x9 = x0+w0;
y5 = 0.6h; z51 = z5;
x6 = x0+0.14w0; y6 = 0.32h;
x7 = x0+0.16w0; y7 = 0.077h;
y4 = 0.15h;
y8 = sdy;
y9 = seb;
http://fontforge.g ithub.io/en-US/
% define pen angles
penpos1(0.05pt,120);
penpos2(sw,30);
penpos5(sw,30);
penpos51(0.05pt,300);
penpos6(sw,30);
penpos7(sw,30);
penpos4(0.2pt,120);
penpos8(sw,30);
penpos9(sew,sea);
penlabels(1,2,4,5,51,6,7,8,9);

12. http://fontforge.github.io/en-US/
www.kalliculator.com
-
Frederik Berlaen
2007
www.laikafont.ch
-
N. Kunz & M. Flückiger
2009

13. http://fontforge.github.io/en-US/
Prototypo Alpha — 2010

14. http://fontforge.github.io/en-US/

15. http://fontforge.github.io/en-US/

16. http://fontforge.github.io/en-US/

17. http://fontforge.github.io/en-US/

18. http://fontforge.github.io/en-US/
v

19. http://fontforge.github.io/en-US/
Prototypo Alpha — 2010

20. http://fontforge.github.io/en-US/
v

21. Open-Source
http://fontforge.github.io/en-US/
Web App

22. RoboFab
TTX/FontTools
http://fontforge.github.io/en-US/
…

23. http://fontforge.github.io/en-US/ H!

24. Starti nhttpg://fo ntfforgreo.g ithmub.io/ ens-UcS/ ratch

25. http://fontforge.github.io/en-US/
Outline based drawing
width

26. <SVG>
+ JS
http://fontforge.g ithub.io/en-US/

27. http://fontforge.github.io/en-US/

28. http://fontforge.github.io/en-US/

29. http://fontforge.g ithub.io/en-US/
SVG based recipes
M {{ self[6].x }} {{ xHeight * (66/465) }}
Cv {{ roundness }} 0 0 {{ self[3].x + thickness * (3/80) * contrast }} {{ descender }}
L 0 {{ self[2].y + thickness * (62/80) * contrast }}
Ch {{ roundness }} 0 0 {{ [ self[5].x }} {{ self[1].y }}
L 167 {{ xHeight }}
L {{ self[5].x + thickness }} {{ self[5].y }}
L {{ self[1].x }} {{ self[1].y }}
Z
add top-dot at {{ [ self[5].x + ( self[6].x - self[5].x ) / 2 ,
xHeight + ( 80 / 465 ) * xHeight ] }}
replace from self[5] at {{ {y: self[5].y - ( serifHeight + serifHeight * serifCurve ) } }}
to self[6] at {{ {x: self[6].x - thickness /2} }}
with serif-top-left {{ { angle: self[5].angle } }}

30. http://fontforge.github.io/en-US/
contour

31. Skeleton
+
http://fontforge.github.io/en-US/
small extendable API
RoboFab

32. http://fontforge.github.io/en-US/
contour skeleton

33. Skeleton
+
http://fontforge.github.io/en-US/
small extendable API
RoboFab

34. http://fontforge.github.io/en-US/ .JS
http://byte-foundry.github.io/plumin.js

35. http://fontforge.g ithub.io/en-US/

36. http://fontforge.github.io/en-US/
contour skeleton

37. http://fontforge.github.io/en-US/

38. http://fontforge.github.io/en-US/
contour + skeleton

39. http://fontforge.github.io/en-US/
rotation

40. http://fontforge.github.io/en-US/
Distribution

41. rotation
expansion
http://fontforge.github.io/en-US/
distribution
components

42. 1:
x: anchors[0].x / 2
y: capHeight + overshoot
width: thickness http://fontforge.* opticThickness github.io/en-US/
* contrast
lDir: 0 + 'deg'
angle: - 85 + 'deg'
distr: 0

43. Smooth Sharp
Contrast +-
90 %
50 %
+-
+-
Distribution Angle 30 °
+-
Tension More options ▼
1
http://fontforge.github.io/en-US/

44. http://fontforge.github.io/en-US/

45. http://fontforge.github.io/en-US/

46. http://fontforge.g ithub.io/en-US/

47. http://fontforge.github.io/en-US/

48. http://fontforge.g ithub.io/en-US/

49. http://fontforge.g ithub.io/en-US/

50. http://fontforge.github.io/en-US/

51. http://fontforge.github.io/en-US/

52. http://fontforge.github.io/en-US/
t
https://github.com/nodebox/opentype.js

53. http://fontforge.github.io/en-US/
https://github.com/byte-foundry/opentype.js

54. http://fontforge.g ithub.io/en-US/

55. http://fontforge.github.io/en-US/
http://glyphrstudio.com

56. http://fontforge.g ithub.io/en-US/

57. http://fontforge.github.io/en-US/ Next features

58. http://fontforge.g ithub.io/en-US/

59. http://fontforge.g ithub.io/en-US/

60. http://fontforge.g ithub.io/en-US/

61. + Alternates
+ Individualization
+ http://Manual fontforge.github.io/en-editing
US/
+ Community

62. http://fontforge.github.io/en-US/
https://github.com/byte-foundry/prototypo

63. http://fontforge.github.io/en-US/

64. http://fontforge.g ithub.io/en-US/ WTF?

65. http://fontforge.github.io/en-US/ Gracias!

66. http://fontforge.github.io/en-US/
@prototypoApp - www.prototypo.io
fonts: Gemeli Micro & Mono
from Production Type