17
Essay submitted in partial fulfilment of the requirements for the MA in Typeface Design, University of Reading, 2013 Caligula: Reflection on Practice MA Typeface Design 2012–13 by Jonas Niedermann 2. July 2013

Caligula: Reflection on Practice - Typeface design at …typefacedesign.net/wp-content/uploads/2013/08/RoP_JonasNiedermann.pdfCaligula: Reflection on Practice ... Fedra Serif, Tisa

Embed Size (px)

Citation preview

Page 1: Caligula: Reflection on Practice - Typeface design at …typefacedesign.net/wp-content/uploads/2013/08/RoP_JonasNiedermann.pdfCaligula: Reflection on Practice ... Fedra Serif, Tisa

Essay submitted in partial fulfilment of the requirements for the MA in Typeface Design, University of Reading, 2013

Caligula: Reflection on Practice

MA Typeface Design 2012–13 by Jonas Niedermann 2. July 2013

Page 2: Caligula: Reflection on Practice - Typeface design at …typefacedesign.net/wp-content/uploads/2013/08/RoP_JonasNiedermann.pdfCaligula: Reflection on Practice ... Fedra Serif, Tisa

Contents

1 Introduction

2 Defining an environment 2.1 Stunning screen resolution 2.2 Digital magazine design 2.3 Localizing design problems 2.4 Where to start?

3 Development of Caligula 3.1 Finding my own design – trying hard not to be boring 3.2 The Caligula family 3.2.1 Italic 3.2.2 Display styles – black and thin 3.3 Non-latin: Exploring the Armenian script

4 Conclusion

1

Page 3: Caligula: Reflection on Practice - Typeface design at …typefacedesign.net/wp-content/uploads/2013/08/RoP_JonasNiedermann.pdfCaligula: Reflection on Practice ... Fedra Serif, Tisa

1. IntroductionThis essay represents a reflection on the practical work as a part of the MA Typeface Design course at the University of Reading. It shows the develop-ment of Caligula, a typeface family primarily designed for magazines on mobile devices, between October 2012 and July 2013.

In a first part of this essay, I will try to locate the main design issues and possible restrictions evoked by the chosen design brief and further, how I faced and solved these issues during the design process in the last 9 months.

2

Page 4: Caligula: Reflection on Practice - Typeface design at …typefacedesign.net/wp-content/uploads/2013/08/RoP_JonasNiedermann.pdfCaligula: Reflection on Practice ... Fedra Serif, Tisa

Figure 1: Comparison of the screen resolution on the Apple iPad 2 (left) and the iPad 3 with retina screen (right). (Pictures scaled: 200%)

1 http://www.apple.com/ipad/specs/

2. Defining an environment

2.1 Stunning screen resolutionFascinated by very recent developments in the mobile device market, I decided, in the beginning of this course, to devote this year designing a typeface for mobile devices such as Apple’s new iPad with Retina screen.

Since the introduction of the first tablet computers, the publishing industry finds itself in a period of transition away from print to publications on electronic surfaces. In almost every sector of publishing a trend of decreasing sales of printed matter and on the other hand an increase of distribution of digital content can be observed.

The screen resolution of computers has gradually increased over the last 30 years and in 2012, Apple has revolutionized the market with the introduction of the new retina screens. For instance, increased the screen resolution of an Apple iPad 2 from 132 PPI on 1024 × 768 to a splendid screen resolution of 264 PPI on 2048 × 1536 on an iPad 3 Retina. [Fig. 1] As the name Retina implies, Apple claims that the resolution is so good that it makes it impossible to distinguish and recognise individual pixels with the human eye.¹

After researching in these very technical fields, I realized that the appearance on screen not only depends on the screen resolution, but also on the operating system on a device and its specific rendering strategies. As a consideration of all operating systems, platforms and devices would have led to a vast project with diverse issues which would have been impossible to master within this course. This was the reason why decided to concentrate on the new Apple iPad with iOS as its operating system. The Quartz technology that is working in iOS, ignores and overwrites all font hinting instructions stored in the font file and automatically hint the font on-the-fly with surprisingly good and reliable results. Hence, I had not to deal with technical issues such as font hinting and could focus on just design-related issues.

2.2 Digital magazine designWhen adapting a printed magazine design to a tablet computer, the magazine designer is faced with various design issues and has to make different deci-sions than in print. The most obvious of all, is the problem of interactivity as for instance the possibility of changing between landscape and portrait view on a tablet computer, the multi-dimensional magazine structure and associ-ated various reading directions. At the same time the designer lacks space to transfer information due to a smaller page or screen sizes. [Fig. 2]

3

Page 5: Caligula: Reflection on Practice - Typeface design at …typefacedesign.net/wp-content/uploads/2013/08/RoP_JonasNiedermann.pdfCaligula: Reflection on Practice ... Fedra Serif, Tisa

On the other hand publishers seek consistency in style across all their physical and electronic publications. [Fig. 3] To achieve such a coherent magazine design across all media, the typographic palette is of immense importance. The conventions of hierarchy, order, and semantics of a printed magazine, apply to its digital version in the same way. The smaller format and lower screen resolution of devices, reduce the range of possible font sizes and styles available to establish hierarchy and thus semantic differenti-ation.

2.3 Localizing design problemsIf we look at typefaces intended to work well on screen and in different rendering environments, one can see that there is a common approach to the issue. In order to serve the grid of rendering engines, most of these designs are rather low in contrast, imply sturdy and generic letter shapes with a urge to angularity and a strong emphasis on the horizontals and verticals. Open counters, straight stems and sturdy serifs improve the legibility in reading sizes on low-resolution screens. Italics are often drawn with a steep angle in order to distinguish enough from the regular and match better to the pixel grid. [Fig. 4]

4

Figure 2: A common magazine format compared to the format of an iPad and an iPhone up to version 4.(Designing books, Hyphen Press, London, 1996, p. 37)

Figure 3: The Guardian in printed edition and as an iPad application.

Page 6: Caligula: Reflection on Practice - Typeface design at …typefacedesign.net/wp-content/uploads/2013/08/RoP_JonasNiedermann.pdfCaligula: Reflection on Practice ... Fedra Serif, Tisa

Figure 4: 3 examples of typefaces that perform well on screen; Fedra Serif, Tisa and Georgia.

Figure 5: Comparison of the National Geographic Magazine rendered on a Samsung Galaxie Tab 7, Google Nexus 7 and a Sony Tablet S. (Pictures scaled 200%; by Miguel Sousa)

The following example [Fig. 5] shows the issue of different operating systems, devices and their various rendering of a typeface. Besides showing the rendering of a font in various resolutions, the example demonstrates the issue of weight differences. Designing the bodytext size in different grades², might be a solution for this problem. Slightly heavier and lighter in weight, the styles could help to compensate different rendering on different screens.

A typeface designed for digital magazines has to deal with the afore men-tioned issues of reduced range of font sizes and styles to establish hierar-chies and semantic differentiation or in other words, it should provide enough typographic elements and features to accomplish a complex struc-ture. Comparing current digital magazines for my research, I tried to capture a common denominator of typographic styles.

Most digital magazines use a legible seriffed body text typeface in regular and italic or small caps as a second style. Sub-headings and leads are in bold and often in a sans serif typeface. These styles are combined with either seriffed or sans seriffed display typefaces. Common variations are condensed and expanded typefaces from heavy to ultra thin for headlines, initials and deck.

5

2 Styles of typefaces slightly heavier or lighter in weight.

Page 7: Caligula: Reflection on Practice - Typeface design at …typefacedesign.net/wp-content/uploads/2013/08/RoP_JonasNiedermann.pdfCaligula: Reflection on Practice ... Fedra Serif, Tisa

2.4 Where to start?The new Apple iPad with its doubled screen resolution, compared to the iPad 2, has diminished restrictions in designing a typeface for such devices. The higher resolution implies totally new possibilities and the rendering is much closer to print than the rendering of former devices. This was the starting point of my journey. The aim of my project was to go to the limit of the new retina screen. How far can I go with my design features such as contrast between thick and thin, curviness and tension in strokes?

Apart from dealing with the before mentioned technical issues, the project ought to result in highly legible workhorse text styles, in combina-tion with several distinctive display styles. These display styles should provide enough variety to distinguish between different genres of magazines or sections within a magazine. Furthermore, the typeface should offer a decent contrast between its styles, so that magazine designers will just need a single typeface family that is fully compatible within itself, instead of several typefaces with different origins and concepts.

In other words, the typeface family needs a split personality – legibility and efficiency in bodytext sizes and variety, expression and temper in bigger sizes.

3. Development of Caligula

3.1 Finding my own design – trying hard not to be boring!In our very first workshop with Gerard Unger in November 2012, we experi-mented with coloured paper, scissors and tape, searching for ideal and beautiful curves. [Fig. 6, 7] This was a very unconventional and inspiring start in an intense year of type design and a good approach to letterforms in general. I would return to this modular approach of stenciling and combin-ing various shapes several times during the development of Caligula.

6

Raech

Figure 6, 7: Letter shapes cut out of coloured paper (top) and the first digitalisation in Glyphs (bottom).

Page 8: Caligula: Reflection on Practice - Typeface design at …typefacedesign.net/wp-content/uploads/2013/08/RoP_JonasNiedermann.pdfCaligula: Reflection on Practice ... Fedra Serif, Tisa

Figure 8: Two examples of role models for my first drafts. Miller text (left) and Farnham (right).

Figure 9: First sketches of design features. (Picture scaled 50%)

After these first experiments with curves and letter forms, I decided to concentrate on the topic again. Since my brief was the design of a typeface for magazines, I had a closer look at newspaper and magazine typefaces. [Fig. 8] This step led me in the right direction and gave me a clue where to explore further.

Features in my first attempts like ball terminals in a, c and s, the vertical contrast axis, flat bracketed serifs and the pronounced contrast between thick and thin, were clearly inspired by the early newspaper typefaces. Furthermore, proportions such as a large x-height and short ascenders and descenders are derived from the efficient designs of my role models. [Fig. 9, 10]

7

MILLER

38

AVAILABLE FROM FONT BUREAU AND ITS DISTRIBUTORS

Miller, designed by Matthew Carter, is a ‘Scotch Roman,’ a class of sturdy, general purpose types of Scottish origin, widely used in the US in the last century, but neglected since & overdue for revival. Miller is faithful to the Scotch style – though not to any one historical example – and authentic in having both roman & italic small caps, a feature of the originals; Tobias Frere-Jones & Cyrus Highsmith added to the series; c&c, fb 1997–2000

CARDBOARDDISPLAY SEMIBOLD

Boxes in strange dimensionsDISPLAY ITALIC

63 CubitsDISPLAY LIGHT

ROLL OF CLEAR PACKING TAPEDISPLAY ROMAN

POINTED KNIVESDISPLAY ITALIC

Little Styrofoam Peanuts Were So AdorableDISPLAY ITALIC SMALL CAPS

New AcquaintancesDISPLAY ROMAN SMALL CAPS

They became my most trusted confidantesDISPLAY ROMAN

Late PracticesDISPLAY SEMIBOLD ITALIC

I taught them some dance routinesDISPLAY ITALIC

Let me tell you, getting them to listen carefully was di∞cult DISPLAY ROMAN

SYNCH≤ONIZEDISPLAY BOLD

Packing Material on Ice Opens on BroadwayDISPLAY ROMAN & ITALIC SMALL CAPS

Ecstatic ReviewsDISPLAY ROMAN

15 STYLES: ROMAN, ROMAN SMALL CAPS, AND BOLD, ALL WITH ITALICS, IN TEXT SIZE;

LIGHT, ROMAN, ROMAN SMALL CAPS, AND SEMIBOLD, ALL WITH ITALICS, PLUS BOLD, IN DISPLAY SIZE

CONTACT FONT BUREAU FOR INFORMATION ABOUT ADDITIONAL STYLES

FARNHAM AVAILABLE FROM FONT BUREAU AND ITS DISTRIBUTORS

25 STYLES: LIGHT, REGULAR, MEDIUM, BOLD, AND BLACK IN DISPLAY SIZE, ALL WITH ITALICS AND SC, PLUS REGULAR ITALIC SWASH

REGULAR, SEMIBOLD AND BOLD IN TEXT SIZE, ALL WITH ITALICS AND SMALL CAPS

German-born punchcutter Johann Fleischman, contemporary of Baskerville and Fournier, worked at the Enschedé Foundry in Haarlem. Expert in advanced tools and the qualities of fine steel, he pushed beyond the frontiers of his time, cutting active typefaces famous worldwide for their “sparkle.” Christian Schwartz focused on Fleischman’s exuberant angularity, carrying it to all weights of his new Farnham series; fb 2004

WEALTHY SOCIALITEDISPLAY BLACK

Bohemian NeighborDISPLAY REGULAR ITALIC SWASH

BrickDISPLAY LIGHT

Very Unusual Architecture DISPLAY REGULAR SMALL CAPS

$9,532/month is almost worth it for the locationDISPLAY MEDIUM

Cocktail HourDISPLAY MEDIUM ITALIC

Tonic spilled all over the sofabedDISPLAY BLACK SMALL CAPS

NoticeableDISPLAY BOLD

FABULOUS SKYLINE VIEWDISPLAY MEDIUM ITALIC

FIREPLACEDISPLAY LIGHT

Page 9: Caligula: Reflection on Practice - Typeface design at …typefacedesign.net/wp-content/uploads/2013/08/RoP_JonasNiedermann.pdfCaligula: Reflection on Practice ... Fedra Serif, Tisa

Figure 10: One of the very first drafts in December 2012.

While developing the regular, the idea of the typeface family with italic and various display styles, was already present in a very early stage. [Fig. 11, 12] Design features introduced in the regular, were immediately tested in the other styles and scripts. This workflow used throughout the entire design process, gave me control over consistency and at the same time variety in details across the typeface family.

Regular testing on an iPad with means of iBook Author³, an application by Apple, had a immense influence on details and on entire letter shapes. Firstly intrigued by the screen resolution and the rendering of details on the new iPad, as expected in my brief, I suddenly realized, that my design had lost its crispiness and interesting contrasts. Although it performed very well on

8

3 http://www.apple.com/ ibooks-author/

adchesion

aaaaa�nnnnn�

Figure 11, 12: Sketches and first digital draft of a family concept in December 2012 (Picture scaled 50%)

Page 10: Caligula: Reflection on Practice - Typeface design at …typefacedesign.net/wp-content/uploads/2013/08/RoP_JonasNiedermann.pdfCaligula: Reflection on Practice ... Fedra Serif, Tisa

screen, I was not satisfied with the design. It became very sturdy, boring and generic over the last few weeks of testing and designing and had lost all of its character and personality, that I was looking for.

This was a turning point in the project, where I decided to concentrate more on interesting shapes and the design in general, rather than becoming set on technical aspects and their restrictions.

Lectures about the William Addison Dwiggins’s M-formula have been influencing projects in Reading for years and the interaction of smooth curves and sharp defining corners could be seen as a stylistic feature of the “Reading style”.

A further step to a more attractive design implied the attempt of the M-formula and I begun to introduce inflexion points within inside curves. But already after a few steps in the process, this element had almost disap-peared as it was not the solution for my issue.

Another and a more promising attempt was to reflect on the first work- shops, especially on Gerard Unger’s paper cut week in November. Such stencil features proofed to work surprisingly well in small sizes and made the design more distinctive in the bigger display styles.

Reducing weight in the middle of stems and the emphasis of stroke endings and serifs, was another experiment to activate and stimulate the design. Further testing on the iPad proofed that such a stress on the base-line and the x-height is clearly beneficial for legibility on screen. Conse-quently, I experimented more with these elements, in order to find ideal shapes with enough character and weight. This led to spiky, triangular features in crossbars of f and t, triangular terminals (a, c, f,…), heavy

9

acdefgijmnorsacdefgijmnorsacdefgijmnorsacdefgijmnorsacdefgijmnors

Figure 13: The development of letter shapes and design features between January and June 2013.

January 2013

February 2013

February 2013

March 2013

April 2013

Page 11: Caligula: Reflection on Practice - Typeface design at …typefacedesign.net/wp-content/uploads/2013/08/RoP_JonasNiedermann.pdfCaligula: Reflection on Practice ... Fedra Serif, Tisa

top-serifs (l, b, d, h,…) and heavy wedged serifs. Triangularity became one of the main stylistic feature in the design and ensures visual consistency and coherence across the Caligula family.

3.2 The Caligula familyAs before mentioned, all styles of the family have been developed simulta-neously and separately. This approach helped to co-ordinate the design features across the family and hence ensure consistency.

3.2.1 ItalicIn the beginning of this project, the broad nipped pen was a crucial tool to familiarise with curves and letter shapes. Above all, the italics benefited the most from such an analog approach. After experimenting with different stroke endings, overall width and weight, I harmonised the italic with the regular. Similar features were introduced and the overall texture adjusted. I kept the italic almost upright and set the angle to just 6 degrees. [Fig. 17] In order to achieve enough distinction between the italic and the regular, width and weight of the letters has been adjusted.

10

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

Ëñjąfğ¡Enjafg!Figure 14 : Vertical proportions and design features of Caligula; submitted in June 2013.

FH36lp

Page 12: Caligula: Reflection on Practice - Typeface design at …typefacedesign.net/wp-content/uploads/2013/08/RoP_JonasNiedermann.pdfCaligula: Reflection on Practice ... Fedra Serif, Tisa

11

Figure 16, 17: The development of the regular italic between December 2012 and June 2013 and italic design features of Caligula italic; submitted in June 2012.

nlpafqnABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

nifaljc

nifaljgc

nifaljgc

nifaljgc

nifaljgc

nidalmDecember 2012 March 2013

January 2013 April 2013

February 2013 June 2013

Figure 15 : First sketches with pen and pencil. (Picture scaled 50%)

Page 13: Caligula: Reflection on Practice - Typeface design at …typefacedesign.net/wp-content/uploads/2013/08/RoP_JonasNiedermann.pdfCaligula: Reflection on Practice ... Fedra Serif, Tisa

3.2.2 Display styles – black and thinIn contrast to the bodytext styles – regular and regular italic – the design process of the black and thin styles, which were designed to work mostly in display sizes, was much more experimental and with less restrictions in mind. As these styles shall show the temper and the personality of the family, I approached them without restraint. The magazine design in mind, I played around with contrast, width, stencil shapes and weights. Exaggerat-ing and emphasising the design features, defined in the regular styles, guaranteed display styles with its own character and at the same time all styles still performed well together as one family.

12

Figure 18, 19: The development of the black and thin display styles between December 2012 and June 2013. In order to reduce visual noise the stenciled counters were removed in the black weights.

nlpafqn

nifaljgc

nifaljgc nifaljgc

nifaljgc

nifaljgc

nidaecs

nifaljgc

nifaljgc

nifaljgc

nidaecsDecember 2012

December 2012

January 2013April 2013

June 2013

June 2013

June 2013

June 2013

agag

Page 14: Caligula: Reflection on Practice - Typeface design at …typefacedesign.net/wp-content/uploads/2013/08/RoP_JonasNiedermann.pdfCaligula: Reflection on Practice ... Fedra Serif, Tisa

3.3 Non-latin: Armenian scriptRight from the beginning of this course, I was fascinated by the structure and letter forms of the Armenian script. Despite the early decision to explore the Armenian script during the following months, I started the design quite late in this year. As there is not much material and literature about the script, it was essential to look at manuscripts, early printed books and already existing typefaces supporting Armenian. Elena Papassissa’s dissertation “The current state of Armenian typefaces” from 2012 was very important for me to familiarise with the foreign script. Feedback and discussions with Elena, Khajag Apelian, who designed Arek, and Hrant Papazian, an experienced Armenian type designer, guided me through the adventure of designing Armenian.

Before starting with the Armenian, a couple of very crucial questions arose. For instance: Which proportions should the Armenian have in relation to the Latin? Should it be slanted or upright, traditional or contem-porary? How closely related are the letter shapes to the Latin?

Recent typefaces have shown different solutions for these issues and are sometimes totally contrasting each other. Designing contemporary Arme-nian typefaces has often led to heated discussions about how to approach the proportions (ascenders and descenders), slant (slanted or upright style) and some letters of the alphabet.

13

Figure 20, 21: The development of the Armenian script between February and June 2013 and vertical proportions compared to the Latin.

pdՋպիաբգդհք

Թաբգդհք

աբգդհքFebruary 2012

April 2013

June 2013

3°6°

Page 15: Caligula: Reflection on Practice - Typeface design at …typefacedesign.net/wp-content/uploads/2013/08/RoP_JonasNiedermann.pdfCaligula: Reflection on Practice ... Fedra Serif, Tisa

I followed the traditional model of the script and slanted the letters to 3 degrees. The introduction of similar triangular design features and stencil features as in the Latin helped to harmonise both scripts. The Armenian script is essentially similar to the Latin-based writing systems, except in its heavy reliance on ascenders and especially descenders. In order to maintain these traditional proportions and the authenticity of the script, the length of ascenders and descenders were slightly increased and the x-height reduced. Furthermore, such a reduction of the x-height helped to balance the optical alignment of both scripts. Due to the time limit, this design is a work in progress typeface, which still shows issues that have not been resolved yet.

14

ԱԲԳԴԵԶԷԸԹԺԻԼԽԾԿՀՂՃՄՆՇՈՉՊՋՌՍՎՐՒՔՕաբգդեզէըթժիլխծկհձղճմյնշոչպջռսվտրցւփքօֆևմէմի

պլմհշկպյռրնսո

Figure 22: The submitted Armenian character set and some characters in the two display styles .

Page 16: Caligula: Reflection on Practice - Typeface design at …typefacedesign.net/wp-content/uploads/2013/08/RoP_JonasNiedermann.pdfCaligula: Reflection on Practice ... Fedra Serif, Tisa

4. ConclusionThe environment were Caligula is located and my design brief defined 9 month ago, were very influencial during the entire design process. In my case, remaining too close to the brief and its technical issues, inhibited me in the beginning from exploring and finding my own way. I was struggling with embedding character, personality and my own hand into the design, for a long time. But after putting all these thoughts about technical issues aside and starting almost from scratch, the result was much more promising.

The typeface Caligula designed during the MA course can not be seen as a finished project. Besides fine-tuning the glyph shapes in the Latin styles, minor adjustments to the font metrics and further adjustments to the Armenian script would have to be applied. In order to achieve the goals defined in the design brief, several styles of the typeface would have to be added to the family. The goal of this journey was not to design a typeface ready for shipping, but exploring, experimenting and gaining skills in the field of type design and foreign scripts. My journey is not over yet!

15

Page 17: Caligula: Reflection on Practice - Typeface design at …typefacedesign.net/wp-content/uploads/2013/08/RoP_JonasNiedermann.pdfCaligula: Reflection on Practice ... Fedra Serif, Tisa

AcknowledgementsGerry Leonidas, Fiona Ross, Gerard Unger, James Mosley, Michael Twyman, and all the visiting lecturers at the University of Reading. Rudolf Barmettler, Jost Hochuli, Hrant Papazian and Khajag Apelian. All my classmates and MATD graduates for criticism and support.

16