Beruflich Dokumente
Kultur Dokumente
Nitzan Hermon
Introduction
The rst decades following the introduction of movable type in Europe saw printers facing problems in translating (handwritten) manuscripts into textual layouts using metal blocks. The rapid growth of printed materials and the introduction of more complex textual compositions required the printers to develop new ways in which information could be more clearly represented. This led to the column-based layout, and an ongoing standardization process. The work of the typesetter, particularly in the years proceeding to the introduction of more affordable printing (the 19th Century) is well documented and offers a very useful set of skills that can be easily manifested online using CSS and correct mark-up. As Ruder1 observes, the typographer solves a very physical problem, lining up black and white shapes to form words technique, function and formal design are inseparable part of the typographers work. The fascination with the form of the written word was nothing new however it was only with the widespread development of letterpress that the typographer role was born(and has been growing in prominence since). The need to standardise the setting of type resulted in a set of rules and conventions most of which are both accessible and useful when measured against the work of typesetting for screen. Welldesigned works of print demonstrate perfect balance between word and typographical form. By following the same conventions from books extraced bellow typographers could create harmonious works that exceeded their primary role of transferring information. # We will scan through typesetting resources in order to compile a list of guidelines and rules that can then be measured against its digital equivalent by doing so a connection will emerge that will prove the relevance of the rst to the latter.
11967,
p.34
It is not advisable to indent the rst line of the page, especially if it follows a header. It is important not to join both methods of paragraph indication, that is to say that when you use a line break, an indent is redundant. The width of an indent can range from 1 to 3 ems and it depends greatly on the width of the columns it is used in.
Swann2 compiled a concise guide to typesetting and layout design in the later part of the 60s when a shift from manual work to computer-assisted-technologies took place.
Line of body text should contain between 10-12 words Words set in both capitals and small caps should be letter-spaced. Small caps is generally a better option of emphasised text within a copy
Punctuation
The use of punctuation should be kept to a minimum and only be applied when it contributes to the understanding of the text:
Full points are not necessary after well-known abbreviations such as Mr, Mrs In abbreviated qualications the last full point will be omitted, i.e. M.S.I.A Full points in abbreviations may be excluded entirely where qualications are not likely to be confused e.g. Dr instead of Dr. Single quotation marks are sufcient to indicate speech or cited text Where cited text is italic or in smaller size quotation marks are not necessary at all Instead of em dash3 () the en dash4 () needs to be used followed by a word space
Leadins
Another way of indicating a new paragraph is setting the rst word, or number of, in bold, italic, all caps or small caps this technique is called Leadins. Other subhead include the hanging subhead, which is essentially a subhead indented to the left. The amount of the indent will still be a result of the width of the column.
p.40
Citation
When body text includes lengthy quotations and cited text (for example in some academic material) these should be set in smaller point size, with less leading and across a narrower column, separated with a line break before and after the text. These are often referred to as extracts. As the text is set to contrast the body text by size and visual rhythm there is no need to use quotations. Indent is not necessary in the extract nor in the beginning of the paragraph to follow as the text is already visually differentiated from the body text and the paragraphs surrounding it.
Forms
Strictly speaking a form is a document with blank spaces designated for the insertion and collection of data. The forms biggest goal as well as difculty is to convey data clearly and collect data in a consistent and accessible manner.
A well-designed form will keep consistent relationship between the information and the blank spaces where information needs to be populated. It is important to keep the boxed elements on an harmonic grid, and the visual noise to a minimum. Typeface should be visually pleasant, anything between 11 to 14 points, with 12 being the ideal size (though this may vary). Information hierarchy is of the highest importance in forms yet mustnt clutter it, simple bold would be sufcient to indicate areas requiring bigger attention.
A paragraph mustnt end with one syllable of a word this type of composition is known to be very unpleasant to read (and is referred to as an orphan). A page should not contain only one line (that is referred to as a widow).
Spacing
According to Jahn5 , spacing and justication are the two most important factors when setting type. It is advisable to insist on close spacing even in the price of breaking a word in the end of the line. Much of the common mistakes of spacing are a direct result of too large of type, without the appropriate amendments to the spacing. Every size of type has recommended spacing, which will ensure both pleasant typography as well as maximum legibility.
Figure 2.1.9 A
Steer6 recommends wordspace of one and a half to two times the linear (X) width of the lower-case alphabet of type selected. Too much spacing between words mars the looks of otherwise coherent piece of print. When word-spacing exceeds the correct measure, light is let in where it is not wanted, and the wide rivers of white space distract the reader and make reading difcult.
Spacing Terms
The Em space is a square unit of vertical body point size En is exact half of that, three thick units are equal to one En, four Mid units equal to one em and and ve Thins equal to one Em. The hair space is meant to be exactly twelve to the Em but realistically it come in various sizes and can anything between 1 to 3 pt.
51931, 61947,
p.136 p.185
Corrent spacing is a tool typographers can use to align text harmonically and to avoid orphans, widows, hyphenation and generally non-pleasant setting of type. As such this was considered to be a skill the typographer would need to master, a process that would often involve very meticulous work.
the proportion of spacing between letters and words is not linear as the size of the typeface increases and thus the typographer will need to consider the typeface against the needed spacing and maximising the legibility of the text. commas and full point are equivalent to a word-space
The spacing of letters is also a tool typographers can utilise to increase the contrast of a certain word . It can generate emphasize, distinguish as well as separate certain words. When letter spacing is used, spacing bigger than a hair space is often used as mechanically its very thin and tends to break when places between letters. Letter spacing was more commonly used when setting words in capitals and small caps. Letter spacing should be dealt with caution, as appearance of some typefaces can be ruined by excessive spacing. Even when separating display text it is important to be aware of the subtleties of the typeface and examine the ratio between the white and black space.
Leading
Line-spacing, also known as leading is an important element that determines the readability of body text and can be controlled by the typographer in order to balance long lines of text or typeface printed in less than legible colour.
The longer the line, the more leading is needs The lighter a typeface is, the more leading it needs to be kept legible
The leading required to keep composition pleasant is determined by both the outer space of the lines as well as the internal white space within letters. Addiontionally, leading is often used as a way to control the colour of the text. The smaller the text, the less leading it needs and the actual colour of the composition is darker. When increasing the leading more light is reected by the paper.
Justication
The alignment of the lines can have values of right, left or justied (which means that lines start and nish at the same place). In order to control the alignment of the words at the end the line word spacing is often manipulated. This creates gaps and irregular spacing, and thus a solution many typesetters prefer to avoid, relying on other tools e.g. alternating body size, page margins or hyphenation.
Breaks
Word break refers to a situation where a word is broken by hyphen (at the end of a line). Hochuli7 points out there should never be more than 3 successive word-breaks under each other.
the readers eye mustnt come to a point of rest until the transfer of the message has been completed in full. the vertical grid as the major generator of dynamic order and keeper of the symmetry the horizontal line is a suggestive tool and a visual break whilst a vertical one performs the opposite role and encourages the reader to read through, pacing him though the text. in vertical text we give prominence to the vertical dimension using visual queues and long and narrow proportions. Dynamic layout uses geometric principles to visually secure elements into a vertical order. the typesetter ought to note the danger of creating a rigid and characterless layout and should examine each piece of layout against its desired function. it is the work of the typographer to create visual queues that demonstrate both order as well as lack of it where appropriate. A design too harmonious might look monotonic and one with too much air will look chaotic.
Mechanism Of Reading
As the experienced reader tracks though the letters and words, their eyes jump across the lines. These brief movements are known as saccades and their duration varies between 0.2 0.4 seconds. A line is perceived in a series of saccades followed by a long one, the end of the line. The readers eye then reverts to the left, looking for a new line. Information is only absorbed within the xed saccade period and any data to be after that is likely to be missed. With average body text size of 12 points such an interval would normally include 5-10 letters and 1-2 words. If the reader cant make sense of the text then the eye jumps back, in an action that is referred to as regression saccades. In a space of 10 letters only 3-4 letters are focused on by the readers and the rest is guessed according to the connotation of the sentence. When we learn to read the saccades are fairly short and the reading process is time-consuming. As we gain experience in the action of reading we train the eye to engage in longer saccades, over shorter duration of time. The size and frequency of saccades within a piece of type are dependent of the many different variables that micro-typography deals with and are in effect the absolute measurement of a set type readability. The more correct the setting of type is the more pleasant the reading process will be, the measurable presence of that would be the length of the saccade.
72005, 81947,
p.47 p.25
absolute or distance relative meant to between number(%, px, function as line-height targeted lines normal em) type leading sets the absolute or spacing relative between number(%, px, letter-spacing letters normal em) set the nature in justified of the text word justification left in latin right, center, spacing is text-align of text languages justify auto-adjusted absolute or Difficult to indentation of relative target the the first line number(%, px, second text-indent of the element none em) paragraph absolute or control over relative the spacing number(%, px, word-spacing between words normal em) absolute or vertical relative Align an alignment of number(%, px, element to its Vertical-align an element baseline em) parent
Note: on rst look vertical-align seems to be the missing link to properly align typography on a carefully calculated baseline. However, the property doesnt serve its full semantical potentialit sets the element targeted with its parent element. The default value of vertical-align is in fact baseline and its more common uses might be sub-case or super-case a character, for example vim was set in sub case using the vertical align property.
Figure 2.2.1 - Setting of text in sub case using the vertical align property
property
default value
text-wrap
normal
normal
hangingpunctuation
location of a punctuation mark, if present none Table 2.3.4 CSS Frameworks overview
9http://www.w3schools.com
10
h1 25 20 -
h2 23 20 -
h3 21 20 -
h4 19 20 -
h5 17 20 -
h6 15 20 -
The 960 framework was written with the clear intention to give designers the tools for horizontal grid. Being able to lay out items perfectly on a grid that works visually, aesthetically and most importantly dynamically was (and still is) the holy grail.
10http://developer.yahoo.com/yui/articles/gbs
11
Baseline CSS
Out of all of the CSS frameworks the Baseline CSS is the most comprehensive one. Not only does the system offer tools for grids, forms and of course type, the developer also included alternative style sheets for iPhone in addition to the print and Internet Explorer. The Baseline system makes signicant effort in order to accommodate a vertical rhythm using typographical understanding and mathematical work.
h1 36 5 1.2
h2 28 8 1.2
h3 22 1 1.2
h4 18 2 1.2
h5 15 4 1.2
h6 13 5 1.2
11http://baselinecss.com
no date
12
Chrome. The other browser are less predictable but the overall look is not bad either, just not pixel perfect like what I was aiming at. How do you see CSS3 pushing the envelope in terms of more visually consistent setting of type online? @font-face comes to mind as one of the big thing coming. To nally have a choice of font would be welcome but I fear that it will bring a lot of ugly website, the same thing happen when people started to use computer to design, too much ugly fonts out there. Are you considering using CSS3 columns in the coming versions? pushing the aesthetic more towards print? The rst version of Baseline was build with CSS3 columns and padding to push the typo on the baseline. I later nd out that by using relative positioning I would gain in stability and simplicity, unfortunately that method does not work across CSS3 columns so I chose stability mainly because almost no browser support the CSS3 columns right now. I'll probably try and nd a solution when more browser will support the column spec.
13
Despite its prominence in our life, the internet is still young the initial effect this had was an increasing numbers of businesses and individuals looking to get an online presence, mostly with little budget. This led to an abundance of sites where the design level is low, especially the attention to details. Issues such as typography, exact margins and word-spacing are being pushed aside. Interestingly, a similar process was taking place in the print industry when movable type machines were made more affordable the market was ooded with books whose design level was questionable. It was not until later in the 20th Century that the industry has stabilised and the level of output has become more consistent. The ability, or rather the lack of it, of CSS to accommodate coherent designs has promoted other, less recommended solutions, essentially hacks, in order to achieve sufcient are in their designs. It is only the recent introduction of new elements in CSS3 that has promoted the discipline to the forefront of the sector again. In many ways the gaps in previous versions of CSS have created the need for a more streamline work ow, which in return developed the demand for CSS frameworks. The fundamental difference between typesetting for print and typesetting for screen is still the control the user has over the copy. The end of user neednt a trained professional to publish new content and if not given the apropriate guidance the user is likely to make commmon panctuation, spacing and other styling mistakes this is bound to change with the development of CSS3 and the raising attention to detail.
14
References
Abel, P.(2009) Interviewed by Hermon, N. 19 September 2009. Curzi, S.(2010) Interviewed by Hermon, N. 11 April 2010 Goodlatte, R. (2007) Syncotype Your Baselines, Rob Goodlatte, 31 July 2007. Available at: http://robgoodlatte.com/syncotype-your-baselines (Accessed: 14 April 2010) Hermon, N. (2009) Reading Monotype Caster, Flickr, 12 November. Available at http:// www.ickr.com/photos/nitzan_ne_art/sets/72157623778151799 (Accessed: 21 April 2010). Hochuli, J.(2005) - Detail in Typography - Hyphen Press http://960.gs (no date) (Accessed: 9 April 2010) http://developer.yahoo.com/yui/articles/gbs (no date) (Accessed: 28 April 2010) http://handandeye.co.uk (no date) (Accessed: 28 April 2010) http://tinymce.moxiecode.com (no date) (Accessed:28 April 2010) http://webkit.org (no date) (Accessed 27 April 2010) http://www.blueprintcss.org (no date) (Accessed: 9 April 2010) Jahn, H. (1931) - Hand Composition. John Wiley & Sons, Inc. Meyer, E.(2007) CSS Tools: Reset CSS. Available at: http://meyerweb.com/eric/tools/css/reset (Accessed: 9 April 2010) Moye, S.(1995) - Fontographer - Type By Design. MIS Press. Robert, L. and Thrift, J. (2005) The designer and the grid. Rotovision. Roder, E. (1967) Typographie. Niggli Smith, N. (2008) The 960 Grid System, Songspring, 26 March 2008. Available at: http:// sonspring.com/journal/960-grid-system (Accessed: 14 April 2010) Steer, V. (1947) - Printing Design and Layout. Second Edition. Virtue & Company Limited. Swann, C.(1969) - Techniques Of Typography - Lund Humphries Tschichold, J.(1991) - The Form Of The Book - Lund Humphries Publishers W3C (2009) CSS Multi-column Layout Module. Available at: http://www.w3.org/TR/css3-multicol (Accessed: 24 April 2010) W3C (2010) HTML5 - a vocabulary and associated APIs for HTML and XHTML. Available at: http://dev.w3.org/html5/spec/Overview.html (Accessed: 27 April 2010) White, A. (1987) - How To Spec Type. A Roundtable Press Book.
15
Property
break-after
break-before break-inside
Values auto, always, avoid, left, right, page, column, avoid-page, avoid-column auto, always, avoid, left, right, page, column, avoid-page, avoid-column auto | avoid | avoidpage | avoid-column
Initial
Applies to
auto
block-level elements
auto auto
block-level elements block-level elements non-replaced block-level elements (except table elements), table cells, and inline-block elements multi-column elements multicol elements
auto balance normal see individual properties same as for color property [CSS21] none medium
multicol elements
columns column-span
column-width
multicol elements non-replaced block-level elements (except table column-width, column- see individual elements), table cells, and count properties inline-block elements 1, all 1 static, non-floating elements non-replaced block-level elements (except table elements), table cells, and number, auto auto inline-block elements Appendix B - A-Grade Browser Support Chart Source: http://developer.yahoo.com/yui/articles/gbs
16
17