Jazz-Style Font Creation: An Art and a Science

Transcription

1 CARLETON UNIVERSITY SCHOOL OF COMPUTER SCIENCE HONOURS PROJECT (COMP 4905) Jazz-Style Font Creation: An Art and a Science Nicol Lum Supervised by Dr. Louis D. Nel of the School of Computer Science APRIL 12, 2011

2 ABSTRACT Stylisation of font is subtle yet plays an important role in communication a stiff font may emit professionalism while a rounded font suggests creativity and relaxation. The objective of this project was to create a jazz-style music font to be utilized in a music score editor called Arborsong. The two main stages of this project were design and creation. The design phrase involved analysis and design of the font, followed by notation selection of symbols to include in the font, and selection of software used to create the font. Font creation entailed creating individual symbols or glyphs for the font and mapping them to characters, and glyph modification as necessary. This report discusses the design process behind font creation and describes the methodology and logistics of creating a font in its entirety. 1

3 ACKNOWLEDGEMENTS I would like to thank Dr. Louis D. Nel for his guidance throughout this project. His genuine interest in the project and his helpful suggestions were valuable and much appreciated. 2

4 TABLE OF CONTENTS Abstract...1 Acknowledgements...2 List of Figures...4 List of Tables Introduction Design Phase Font Analysis and Design Selection of Notation Software Selection Font Creation How to create a font How to add glyphs to an existing font How to re-map glyphs How to copy glyphs between different fonts Difficulties and Learning Experiences Actual Font vs. Design Conclusions and Further Development References...17 Appendix A: JazzIt Mapping...18 Appendix B: Jazzish Mapping...24 Appendix C: Jazzish Box Mapping...31 Appendix D: JazzyG Mapping

5 LIST OF FIGURES Figure 1: A7 in alphanumeric font...8 Figure 2: A7 in guitar font...8 Figure 3: Type 2.2 Light main window with toolbox and mapping window...10 Figure 4: Arial uppercase A no transformation...11 Figure 5: Transformation to round ends...12 Figure 6: Transformation to look more hand-written...12 Figure 7: Proper contour direction...13 Figure 8: Improper contour direction

6 LIST OF TABLES Table 1: Comparison of example symbols between classical, jazz, and project fonts...7 Table 2: Comparison of overlapping and spaced-out characters

7 1 Introduction The purpose of this project was to create a jazz-style font to be used for the prototype score editor Arborsong. Existing jazz fonts are copyrighted and cannot be used in other software, especially if the borrowing software is proprietary. As such, it was desirable to create a new jazzstyle font to use. The scope of this project was to solely create the font. Practical use of the font and incorporation into Arborsong could serve as a future honours project. 2 Design Phase 2.1 Font Analysis and Design Many people do not realize the importance of font style and how it affects the reader. Font styles need to be recognizable and distinct but also chosen so that they communicate the appropriate message to others [Harris, 2009a]. How does this relate to jazz-style music fonts? Typically, jazz music fonts have more curves and rounded edges, and have a distinct hand-written look. Rounded edges are said to give a relaxing and calm feeling as well as show creativity [Harris, 2009b]. In comparison to classical music fonts, which are stiff and where the music played needs to be precise, a jazz music font is congruent to what jazz music represents it is creative and relaxing, leaves room for improvisation, and invokes a carefree emotion. Initially, the approach taken in designing the font was to look at classical notation, and then hand-draw a jazzier version, which eventually was still somewhat stiff-looking. The results, however, were that the hand-written version did not exude a desirable jazz impression. Having various jazz sheet music as resources then served as good examples of what a standard jazz music font should look like. Since the intention of the project was to create a unique font, and the added difficulty and near impossibility of trying to copy a font exactly, this lead to the design of a few unique jazz fonts. The fundamental conventions followed from other jazz fonts was to keep most of the edges and corners rounded, to extend and cross lines to look more handwritten, and to have thicker and more readable lines. Table 1 shows and compares various examples from the four different fonts created in this project. 6

8 Example Classical Notation Example Jazz Notation My Fonts (JazzIt, Jazzish, Jazzish Box, JazzyG) Treble clef Eighth note Sharp Repeat sign Uppercase A A (Times New Roman bold) Uppercase A boxed N/A G major 7 Gmaj 7 (Times New Roman bold) Trumpet Trumpet (Times New Roman bold) Table 1 Comparison of example symbols between classical, jazz, and project fonts 2.2 Selection of Notation In designing a font, one has to consider which glyphs to include. In creating a jazz-style font, this not only includes standard music symbols, but also an alphanumeric font to be used for titles and other forms of labelling. Many of the music symbols seen in standard classical sheet music were 7

9 included in the fonts, and not exclusively jazz notation. Although a jazz-style font will be generally used for jazz music, there may be the occasion where there is a need to generate sheet music for a modern classical piece, for example, a music soundtrack score, which often has a handwritten impression, in which case classical notation will be required. However, more obscure symbols less frequently seen in either classical or jazz sheet music were excluded, though they may be added to the fonts later as necessary. As the project progressed and more jazz sheet music was analyzed, there became a need to create a font for the standard computer keyboard with alphanumeric symbols to be able to give notation for music titles, author names, instrument names, etc. A box version of the alphanumeric font was also necessary for labelling different sections of a jazz piece. There also became a requirement to create a font specifically for guitar chords. The reasoning for creating a separate font for guitar chords instead of typing out chord names with the alphanumeric font was due to positioning of letters within a chord. Figure 1 A7 chord in alphanumeric font (Jazzish) Figure 2 A7 chord in guitar font (JazzyG) Figures 1 and 2 show different representations of an A7 chord. Figure 1 is written in the alphanumeric font while Figure 2 is written in the guitar font. In Figure 2, the 7 is slightly smaller and elevated so that the top of the 7 is still aligned with the top of the A. It is often seen in guitar chords that anything following the base note is smaller. Our purposes of having the base note larger is so that it is the most prominent element of the chord, and having smaller symbols which follow the base note makes the different elements easy to distinguish and read. As a whole, the guitar chord is easier to recognize this way than if all the letters and numbers were of equal size. 2.3 Software Selection Choosing software for font creation was the primary concern at the beginning of the project. The main criteria for the software was that it be relatively low cost or free, be easy to learn and use, and have the basic functions necessary for font creation. 8

10 At first, an attempt to find open-source software was made, but there was very limited selection. One open-source software was called FontForge. It seemed promising at first as it had many functions, but was too complicated to install because it was built to only run in a Linux environment, and the setup process to integrate it into a Windows environment was unstable and not fully functional. Efforts were then directed at employing the use of proprietary software. One such suggestion was a piece of software called Font Creator. Font Creator is quite well-known and popular. However, since there exist free software that can carry out most of the same functions, the route of locating freeware was taken instead. Type 2.2 Light (the free version of the Type 2.2) made by CR8 Sofware Solutions seemed to fulfill the basic necessary requirements for font creation. The light version is a fully functional freeware allowing for font editing and design for OpenType font; it has limited commercial use in that the fonts created by Type Light can only be sold if font-creation is not the creator s profession. It also has a simple toolbox with basic drawing tools, and can open fonts equipped with a maximum of glyphs. Type 2.2 Light is fairly simple to use but has limited functionality compared to Type 2.2 or even the current Type 3.0. Type 3.0 would be preferable since it has very useful functions such as glyph list functions (copy, duplicate, rename), which are not available in the light version. These functions can be mimicked in the light version but is tedious. 3 Font Creation 3.1 How to create a font After downloading and installing Type 2.2 Light, open it and go to File > New. A New font dialog box will open. Select TrueType metrics and fill in the other necessary information. The main screen will be shown where a toolbox is available for creating glyphs and a mapping window for mapping the glyphs to characters. 9

11 Figure 3 Type 2.2 Light main window with toolbox and mapping window A font consists of a collection of glyphs. To add glyphs to the font, there are two ways to do this: 1) Click on the New glyph button 2) Double click on the character in the mapping window that the glyph will be mapped to. If there is no existing glyph there, you will be asked if you want to map the new glyph to this character click Yes. Please note that certain characters should not be mapped to as they will not be accessible such as the space button, the delete button, etc. To re-map glyphs to different characters, please see section 3.3. The toolbox has eight tools to help create glyphs a pointer, a pen, four control node points, a straight light, a rectangle, an oval, and a ruler. If the glyph being created is more structured and has definite rectangular or oval shapes, then it is fine to use those elements of the toolbox. However, since jazz-style fonts need to look more free-flowing and wavy, it is best to manually 10

12 plot out the nodes with the pen tool and then add control points to add curves or corners to the glyph. For example, suppose we are creating the letter A. Initially, it would look like a standard Arial A, but would then undergo a series of transformations. Figure 4 Arial uppercase A no transformation Glyph size needs to be maintained within the red and green boundary lines otherwise there will be spacing problems. The boundary lines can be moved manually to fit the size of the glyph. The metrics (i.e., the values for ascent, caps height, x height, descent) can be defined under the Font > Metrics menu, but these will remain the same for each glyph, while the red and green boundary lines can be unique to each glyph within the font. The first transformation is to round the bottom and top ends by adding a curve node and pulling it up, and then shorten the glyph to fit within the height boundaries. 11

13 Figure 5 Transformation to round ends To give it a more hand-written impression, add a few corner nodes to the sides so that the cross of the A extends further than the side lines. Figure 6 Transformation to look more hand-written Please also note that the direction of the filled in section must be clockwise, and the unfilled section should be counter-clockwise. If the inner contour of the A is clockwise, the inner triangle will be filled in and the hole will not be displayed. 12

14 Figure 7 Proper contour direction Figure 8 Improper contour direction When finished editing the glyph, press the Map button in the mapping window to make sure it is mapped. To edit the glyph, simply double click on it in the mapping window, edit the glyph, and click the Map button when finished. 13

15 Special glyphs include: GLYPH #0 Used for undefined characters - normally a box shape GLYPH #1 Special glyph with no contours, and zero width GLYPH #2 The CR character - no contours, but with a defined width GLYPH #3 The space character - no contours, but with a defined width To save the font, go to File > Save as (.tff.otf), and save as a.tff file. There is no regular save option, to override an existing file, give it the same name as the file to replace. However, it is recommended to save new copies in case there is a need to revert. The font should be able to install properly at this point. 3.2 How to add glyphs to an existing font To edit a font file, simply open True Light and go to File > Open (.tff.otf) and select the font you want to edit. To add new glyphs or edit glyphs, please see section How to re-map glyphs The safest way to re-map a glyph is to open the glyph to re-map, select all the points and copy them, and then select the character to map it to as if a new glyph were being created, and then paste the points in that glyph. Clicking the Unmap button for a glyph and then trying to map it to another character is unsafe as it is likely that the glyph will be lost. 3.4 How to copy glyphs between different fonts In Type 2.2 Light, there is no built-in function to copy glyphs between fonts. The only way is to open the font in Type 2.2 Light, copy the points of the glyph you want to copy, close the font and open the target font in the same window session of Type 2.2 Light, and then paste the glyph points to a glyph. 14

16 4 Difficulties and Learning Experiences 4.1 Actual Font vs. Design After installing the fonts, the metrics for each glyph needed to be adjusted to ensure that the width of each glyph was appropriate as there was overlapping of characters and too much extra space between adjacent characters. Before After Too spaced out (e.g., Jazzish) Design (e.g., lowercase T) Visual Not enough space (e.g., Jazzish Box) Design (e.g., lowercase T) Visual Table 2 Comparison of overlapping and spaced-out characters Line thickness for many of the glyphs was also increased because when viewed at a smaller font size, the lines were too faint. Since re-mapping glyphs is also quite frustrating, purchasing inexpensive proprietary font software is recommended as it likely to increase the quality of the font as well. Suggestions include Font Creator Home Edition, or Type

17 5 Conclusions and Further Development Font creation is not a particularly arduous task, but it is tedious and requires a lot of attention to detail. There is a lot of review done, and perhaps done multiple times, as we continuously look for ways to improve the font to suit certain needs. The four different fonts created for this project were (1) JazzIt standard music notation, (2) Jazzish alphanumeric font, (3) Jazzish Box Jazzish font with rounded boxes around each glyph, and (4) JazzyG font for representing guitar chords. The next steps for this project would be to install the fonts and test them in Arborsong. From there, the fonts would need to be modified as necessary add glyphs, modify glyphs, fix spacing, create new fonts, etc. 16

18 6 REFERENCES (2009) Font Creator the most popular font editor. < (2009) FontForge. < (2009) Type light - a freeware OpenType font editor. < Harris, B. (2009) The Importance of Font-Style. < Harris, B. (2009) The Importance of Individuality. < Murray, A. (2009) Type Light User Manual. 17

19 APPENDIX A: JazzIt Mapping Jazz Symbol Symbol Name Decimal Hex /Unicode Character Character Name Whole note 33 21! exclam Half note " quotedbl Half note # numbersign Quarter note $ dollar Quarter note % percent Eighth note & ampersand Eighth note ' quotesingle Sixteenth note Sixteenth note Thirty-second note Thirty-second note Sixty-fourth note Sixty-fourth note Dot (dotted note) ( parenleft ) parenright 42 2A * asterisk 43 2B + plus 44 2C, comma 45 2D - hyphen 46 2E. period 18

20 Whole rest 47 2F / slash Half rest zero Quarter rest one Eighth rest two Sixteenth rest Thirty-second rest Sixty-fourth rest three four five Breath mark six Caesura seven Flat eight Sharp nine Natural 58 3A : colon Double flat 59 3B ; semicolon Double sharp 60 3C < less Common time 61 3D = equal Cut time 62 3E > greater Treble clef 63 3F? question 19

21 Bass clef 64 at Alto/tenor clef A A Crescendo B B Diminuendo C C Piano D D Pianissimo E E Pianississimo F F Forte G G Fortissimo H H Fortississimo I I Mezzo piano 74 4A J J Mezzo forte 75 4B K K Forte piano 76 4C L L Sforzando 77 4D M M Staccato 78 4E N N Staccatissimo 79 4F O O 20

22 Marcato P P Tenuto Q Q Martellato R R Up bow S S Down bow T T Stopped note U U Snap pizzicato V V Open note W W Fermata X X Trill Y Y Mordent 90 5A Z Z Mordent (lower) 91 5B [ bracketleft Turn 92 5C \ backslash Inverted turn 93 5D ] bracketright Appoggiatura 94 5E ^ asciicircum Acciaccatura 95 5F _ underscore 21

23 Tremelo ` grave Bold double bar line a a Repeat sign b b Simile mark (repeat previous bar) Similar mark (repeat previous 2 bars) Multi-measure rest Volta bracket (1st ending) Volta bracket (2nd ending) c c d d e e f f g g Da capo h h Dal segno i i Coda 106 6A j j Segno 107 6B k k Engage pedal 108 6C l l Release pedal 109 6D m m 22

24 Variable pedal mark 110 6E n n Coda (boxed) 111 6F o o Segno (boxed) p p Tuplet q q Tie r r Slur, phrase mark s s Glissando t t Arpeggiated chord u u 23

25 APPENDIX B: Jazzish Mapping Jazz Symbol Symbol Name Decimal Hex /Unicode Character Character Name exclam 33 21! exclam quotedbl " quotedbl numbersign # numbersign dollar $ dollar percent % percent ampersand & ampersand quotesingle ' quotesingle parenleft ( parenleft parenright ) parenright asterisk 42 2A * asterisk plus 43 2B + plus comma 44 2C, comma hyphen 45 2D - hyphen period 46 2E. period 24

26 slash 47 2F / slash zero zero one one two two three three four four five five six six seven seven eight eight nine nine colon 58 3A : colon semicolon 59 3B ; semicolon less 60 3C < less 25

27 equal 61 3D = equal greater 62 3E > greater question 63 3F? question at 64 at A A A B B B C C C D D D E E E F F F G G G H H H I I I J 74 4A J J 26

28 K 75 4B K K L 76 4C L L M 77 4D M M N 78 4E N N O 79 4F O O P P P Q Q Q R R R S S S T T T U U U V V V W W W X X X 27

29 Y Y Y Z 90 5A Z Z bracketleft 91 5B [ bracketleft backslash 92 5C \ backslash bracketright 93 5D ] bracketright asciicircum 94 5E ^ asciicircum underscore 95 5F _ underscore grave ` grave a a a b b b c c c d d d e e e f f f g g g 28

30 h h h i i i j 106 6A j j k 107 6B k k l 108 6C l l m 109 6D m m n 110 6E n n o 111 6F o o p p p q q q r r r s s s t t t u u u v v v w w w x x x 29

31 y y y z 122 7A z z braceleft 123 7B { braceleft bar 124 7C bar braceright 125 7D } braceright asciitilde 126 7E ~ asciitilde 30

32 APPENDIX C: Jazzish Box Mapping Jazz Symbol Symbol Name Decimal Hex /Unicode Character Character Name exclam 33 21! exclam quotedbl " quotedbl numbersign # numbersign dollar $ dollar percent % percent ampersand & ampersand quotesingle ' quotesingle parenleft ( parenleft parenright ) parenright asterisk 42 2A * asterisk plus 43 2B + plus 31

33 comma 44 2C, comma hyphen 45 2D - hyphen period 46 2E. period slash 47 2F / slash zero zero one one two two three three four four five five six six seven seven 32

34 eight eight nine nine colon 58 3A : colon semicolon 59 3B ; semicolon less 60 3C < less equal 61 3D = equal greater 62 3E > greater question 63 3F? question at 64 at A A A B B B C C C 33

35 D D D E E E F F F G G G H H H I I I J 74 4A J J K 75 4B K K L 76 4C L L M 77 4D M M N 78 4E N N O 79 4F O O 34

36 P P P Q Q Q R R R S S S T T T U U U V V V W W W X X X Y Y Y Z 90 5A Z Z bracketleft 91 5B [ bracketleft 35

37 backslash 92 5C \ backslash bracketright 93 5D ] bracketright asciicircum 94 5E ^ asciicircum underscore 95 5F _ underscore grave ` grave a a a b b b c c c d d d e e e f f f g g g h h h 36

38 i i i j 106 6A j j k 107 6B k k l 108 6C l l m 109 6D m m n 110 6E n n o 111 6F o o p p p q q q r r r s s s t t t u u u 37

39 v v v w w w x x x y y y z 122 7A z z braceleft 123 7B { braceleft bar 124 7C bar braceright 125 7D } braceright asciitilde 126 7E ~ asciitilde 38

40 APPENDIX D: JazzyG Mapping Jazz Symbol Symbol Name Decimal Hex /Unicode Character Character Name A 33 21! exclam A flat " quotedbl A sharp # numbersign B $ dollar B flat % percent C & ampersand C sharp ' quotesingle D ( parenleft D flat ) parenright D sharp 42 2A * asterisk E 43 2B + plus 39

41 E flat 44 2C, comma F 45 2D - hyphen F sharp 46 2E. period G 47 2F / slash G flat zero G sharp one two three four five Left parentheses six Right parentheses Plus, augmented seven eight Hyphen nine Slash 58 3A : colon Zero 59 3B ; semicolon 40

42 One 60 3C < less Two 61 3D = equal Three 62 3E > greater Four 63 3F? question Five 64 at Six A A Seven B B Eight C C Nine D D Eleven E E Thirteen F F Flat G G Sharp H H Natural I I 41

43 A J J B K K C L L D M M E N N F O O P P Q Q R R S S T T U U V V W W X X Y Y A Z Z B [ bracketleft C \ backslash D ] bracketright E ^ asciicircum F _ underscore ` grave a a a b b c c d d d e e f f g g h h i i i j 106 6A j j B k k C l l m 109 6D m m E n n F o o 42

44 p p q q r r s s s t t u u u v v w w x x y y A z z suspended 123 7B { braceleft Suspended second Suspended fourth 124 7C bar 125 7D } braceright Fifth 126 7E ~ asciitilde F controldel? AC Euro Major A quotesinglbase Major seventh ƒ florin Major ninth E quotedblbase Major thirteenth Minor major seventh ellipsis dagger Minor daggerdbl 43

45 Minor sixth C6 ˆ circumflex Minor seventh perthousand Minor ninth Š scaron Minor eleventh guilsinglleft Minor thirteenth Œ OE Minor seventh with flat fifth D Ž Zcaron Diminished seventh quoteleft Seventh quoteright Seventh with suspended fourth Major seventh with flat fifth Major seventh with sharp fifth C quotedlbleft D quotedblright bullet Ninth endash Ninth with suspended fourth emdash 44

46 Ninth with flat fifth Ninth with sharp fifth DC ilde trademark Thirteenth š scaron Add A guilsinglright Add two add œ oe four Major add nine E ž zcaron Minor add Ÿ Ydieresis nine A0 nbspace Sixth A1 exclamdown Diminished A2 cent 45