sign in sign up
<<
Home , Page layout

BBN–ANG–183 layout

Zoltán G.Kiss & Péter Szigetvári

Dept of English Linguistics, Eötvös Loránd University

gkz & szp (delg) typo/page layout 1 / 98 aims working in academia

gkz & szp (delg) typo/page layout 2 / 98 aims working in academia

◮ (a lot of) papers ◮ theses ◮ research: scientific journals and ◮ needed to evaluate you (appraisal)

gkz & szp (delg) typo/page layout 3 / 98 aims working with publishers

◮ publishing papers in journals of established publishers ◮ working in academia = working with publishers ◮ you will have to know how they work, what they expect from you (and they expect a lot of typographical knowledge from you!)

gkz & szp (delg) typo/page layout 4 / 98 aims people you may be in contact with at a publisher

◮ editor: responsible for the overall content, quality of papers, relies on the evaluation of reviewers ◮ proof-reader: responsible for the language (grammar, accuracy), stylistic consistency ◮ typographer/technical editor: responsible for the form and visual content of the publication ◮ (product manager: financing, contracts, ads; )

gkz & szp (delg) typo/page layout 5 / 98 aims working with publishers

◮ publishers expect you to be fully responsible for your content ◮ but also for the form of your publication ◮ this course is about the typographical form of your publication that satisfies publishers

gkz & szp (delg) typo/page layout 6 / 98 aims from to publication

◮ manuscript publisher camera-ready to printer/e-/online → → 1. publisher does it all, manuscript contains basic formatting 2. publisher provides stylesheet the manuscript must follow, but they create the camera-ready version 3. does it all, including camera-ready version

3. is increasingly common

gkz & szp (delg) typo/page layout 7 / 98 aims aims to achieve today

◮ raw material of publishing ◮ page sizes, proportions ◮ optimal arrangement of elements within page ◮ grids ◮ page colour: spacing of text elements

gkz & szp (delg) typo/page layout 8 / 98 intro

3 basic considerations for the design of a publication

◮ the selection of / – based on general guidelines for legibility, readability, printability, genre, etc. ◮ the compositional arrangement of page elements ◮ the method of distribution (printed, electronic, book, brochure. . . ) today. . . we are going to focus on arrangement = layout

gkz & szp (delg) typo/page layout 9 / 98 intro an example specific workflow

suppose the publisher . . .

◮ wants a camera-ready manuscript from you ◮ on a stock paper A4 ◮ and plans to publish it in a book of size “B/5” ◮ with a “measure” of “22 31 picas” ×

gkz & szp (delg) typo/page layout 10 / 98 intro general workflow

the general process of setting up one’s own page layout

◮ (paper type) ◮ page size (book shape) (e.g., “A/5”) ◮ stock (e.g., “A4”) ◮ trim the stock to the size of the page size crop marks ⇒ ◮ design the layout of your manuscript within the boundaries of the trimmed page size

gkz & szp (delg) typo/page layout 11 / 98 page size page size: shape, proportions the shape of books

◮ usually rectangular ◮ exceptions include children’s books, and a book on epitaphs

gkz & szp (delg) typo/page layout 12 / 98 page size page proportions

◮ the ratio of the height (h) to the width (w) of a rectangle ◮ some proportions seem to be more pleasing to the eye than others ◮ tall shapes lead the eye downwards and easier to hold ◮ the same proportions pop up in many cultures (and nature!)

gkz & szp (delg) typo/page layout 13 / 98 page size

? what are the most common traditional page (& textblock) proportions?

gkz & szp (delg) typo/page layout 14 / 98 page size page proportions

factors

◮ aesthetics ◮ tradition ◮ current industrial (standard) sizes

gkz & szp (delg) typo/page layout 15 / 98 page size the square “unison” (1 : 1)

gkz & szp (delg) typo/page layout 16 / 98 page size the square “unison” (1 : 1) — CD booklets

gkz & szp (delg) typo/page layout 17 / 98 page size common page proportions

gkz & szp (delg) typo/page layout 18 / 98 page size

page (& textblock) proportions: tradition & current standards name proportion (w : h) corresponding standard octave 1:2 — (double square) major 6th 3 : 5 (1 : 1.667) US legal sheet (1 : 1.647) golden 1 : ϕ (1 : 1.618) ≈ fifth 2 : 3 (1 : 1.5) ISO (1 : √2/1 : 1.414) (Gutenberg) ≈ fourth 3 : 4 (1 : 1.294) US letter sheet (1 : 1.294) ≈ unison 1:1 CDbooklets major 3rd 5 : 4 (1 : 0.8) US landscape letter (1 : 0.773) ≈

gkz & szp (delg) typo/page layout 19 / 98 page size

some properties of ISO standard A series paper sizes

◮ A0=1m2 (1189 841 mm) × ◮ the series has the proportion √2 : 1 ◮ all its members are reciprocal with themselves some properties of ISO standard B series paper sizes

◮ larger than A0: 1400 1000 mm × ◮ slightly less reciprocal than A series

gkz & szp (delg) typo/page layout 20 / 98 page size ISO A series paper sizes

gkz & szp (delg) typo/page layout 21 / 98 page size

the ISO vs. America

◮ the ISO standard for paper sizes is widespread except in the US and Canada ◮ the most commonly used sizes for everyday activities are: ◮ letter size (8.5 11 (inch), 216 279 mm) – slightly wider × ′′ × and smaller than A4 ◮ legal size (14 8.5 , 355.6 215.9 mm) – slightly wider and × ′′ × taller than A4

gkz & szp (delg) typo/page layout 22 / 98 the golden section

and now, a brief maths detour

gkz & szp (delg) typo/page layout 23 / 98 the golden section the golden section & Fibonacci series

four special irrational numbers

◮ π = 3.14159 . . . —the circumference of a circle whose diameter = 1 ◮ e = 2.71828 . . . —the base of natural logarithms ◮ √2 = 1.41421 . . . —the diagonal of a unit square ◮ ϕ = 1.61803 . . . —the golden section/ratio

gkz & szp (delg) typo/page layout 24 / 98 the golden section the golden section

◮ also called: “extreme and mean ratio” (Euclid), “the divine proportion”, “medial section” ◮ two elements embody the golden sec. when the ratio of the larger to the smaller is the same as the ratio of the sum of the two to the larger

◮ b a+b a b ϕ = a = b ( > ) √ ◮ ϕ = (1+ 5) 1.61803 . . . 2 ≈ ◮ named after Phidias (5th c. BC); used it in his sculptures

gkz & szp (delg) typo/page layout 25 / 98 the golden section golden ratios in the Parthenon

gkz & szp (delg) typo/page layout 26 / 98 the golden section the relationship between ϕ, rabbits and sunflowers

◮ Leonardo of Pisa (“Fibonacci”), in: Liber Abaci [Book of the Abacus], 1202: ◮“How many pairs of rabbits can be produced from a single pair in a year? Assume that (1) each pair produces a new pair of offspring every month, (2) a rabbit becomes fertile at age one month, and (3) no rabbits die during the year.” ◮ 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1,597 ... ◮ this is the Fibonacci series ◮ the ratio of any adjacent pair of terms oscillates around ϕ (= 1.618 . . .), approaching it ever more closely

gkz & szp (delg) typo/page layout 27 / 98 the golden section the golden section/“perfect” proportion often used in typography

◮ page sizes ◮ textblocks, margins ◮ size changes

gkz & szp (delg) typo/page layout 28 / 98 the golden section the Fibonacci (logarithmic) spiral

gkz & szp (delg) typo/page layout 29 / 98 the golden section the Fibonacci (logarithmic) spiral

gkz & szp (delg) typo/page layout 30 / 98 the golden section the Fibonacci (logarithmic) spiral

gkz & szp (delg) typo/page layout 31 / 98 the golden section the Fibonacci (logarithmic) spiral

gkz & szp (delg) typo/page layout 32 / 98 the golden section the Fibonacci (logarithmic) spiral

gkz & szp (delg) typo/page layout 33 / 98 the golden section tablet/mobile devices & the golden ratio

http://gold3nratio.tumblr.com/

gkz & szp (delg) typo/page layout 34 / 98 the golden section Fibonacci spiral in photography: detail vs. space

gkz & szp (delg) typo/page layout 35 / 98 the golden section Fibonacci spiral in photography: detail vs. space

gkz & szp (delg) typo/page layout 36 / 98 the golden section Fibonacci spiral in : ‘content clustering’

http://www.hongkiat.com/blog/golden-ratio-in-moden-designs/

gkz & szp (delg) typo/page layout 37 / 98 the golden section Fibonacci spiral in fight scene

gkz & szp (delg) typo/page layout 38 / 98 the golden section Fibonacci patterns in sunflower floret spirals

gkz & szp (delg) typo/page layout 39 / 98 the golden section Fibonacci spiral in a nautilus shell

gkz & szp (delg) typo/page layout 40 / 98 the golden section Fibonacci spiral in clouds

gkz & szp (delg) typo/page layout 41 / 98 the golden section Fibonacci spiral in cats

gkz & szp (delg) typo/page layout 42 / 98 the golden section Fibonacci series in font size changes

font sizes

◮ 5, 8, 13, 21, 34, 55, 89 . . . ◮ more versatile: 5, 6, 8, 10, 13, 16, 21, 26, 34, 42, ...

gkz & szp (delg) typo/page layout 43 / 98 trimming stock page size = trimmed 6

gkz & szp (delg) typo/page layout 44 / 98 trimming A5 stock—A/5 book size

gkz & szp (delg) typo/page layout 45 / 98 trimming B5 stock—B/5 book size

gkz & szp (delg) typo/page layout 46 / 98 trimming

gkz & szp (delg) typo/page layout 47 / 98 trimming bleeds &

gkz & szp (delg) typo/page layout 48 / 98 trimming

gkz & szp (delg) typo/page layout 49 / 98 trimming specifying bleeds & slug in an application

gkz & szp (delg) typo/page layout 50 / 98 trimming

some standard stock and trimmed book sizes press sheet size (mm) stock size (mm) trimmed book size (mm) 841 1189 (=A0) A4 210 297 A/4: 202 285 2 × × × ± A5 148 210 A/5: 142 197 2 × × ± 700 1000 ( B1) B4 250 353 B/4: 243 336 2 × ≈ × × ± B5 176 250 B/5: 168 238 2 × × ± press sheet/broadsheet = ‘nyomdai nyersív’

gkz & szp (delg) typo/page layout 51 / 98 trimming length in press sheet in the colophone

gkz & szp (delg) typo/page layout 52 / 98 trimming

press sheet

◮ in Hungarian books (colophone) the length of a book is given in press sheets ◮ one press sheet = 16 pages ◮ the standard is to measure in A/5 pages ◮ p if a book is printed on A/5 trimmed size, its length = 16 A/5 sheets ◮ 512 e.g.: if your book is 512 pages long, its length is 16 = 32 A/5 sheets

gkz & szp (delg) typo/page layout 53 / 98 trimming

press sheet

◮ what if the size is B/5 and not A/5? ◮ A-series stock is larger than B-series stock by 1.43 (e.g., A0 = 1m2, B1 = 0.7m2) . ◮ p 1 43 if a book is printed on B/5 trimmed size, its length = ×16 A/5 sheets ◮ 612 1.43 if your B/5 book is 612 pages long, its length is ×16 = 54.7 A/5 sheets

gkz & szp (delg) typo/page layout 54 / 98 grids

now we know the trimmed book size, what next?

◮ create the textblock (or: typeblock, type area, live area) ‘tükör’, design its optimal horizontal and vertical length ◮ position the textblock within the book page this creates margins ⇒ around the textblock ◮ we add place for the optional satellites: footer and/or the header, and the marginal notes ◮ essentially thus we divide the available space of the page into grids (frames)

gkz & szp (delg) typo/page layout 55 / 98 grids grids in typography

◮ essential part of page design ◮ give underlying structure and consistency to a document ◮ structure must be balanced and orderly ◮ most professional DTP applications (QuarkXpress, InDesign) rely on grid structure

gkz & szp (delg) typo/page layout 56 / 98 grids main grid types in typography

◮ grids: simple publications, books, vertical designs ◮ modular grids: more complex designs, vertical–horizontal designs

gkz & szp (delg) typo/page layout 57 / 98 grids an empty, unstructured trimmed spread

gkz & szp (delg) typo/page layout 58 / 98 grids grids: structured trimmed spread

gkz & szp (delg) typo/page layout 59 / 98 grids grids: structured spread

gkz & szp (delg) typo/page layout 60 / 98 grids grids: underlying structure, consistency

gkz & szp (delg) typo/page layout 61 / 98 grids elements of a recto page

gkz & szp (delg) typo/page layout 62 / 98 grids

header, footer, folio, notes vs. the textblock

◮ header & footer: usually not counted in the size of textblock (unless it contains only the folio) ◮ footnotes: always part of textblock ◮ marginal notes: never part of textblock

gkz & szp (delg) typo/page layout 63 / 98 grids textblock/margins what size should the textblock & margins be?

considerations

◮ industry standards ◮ historical proportions ◮ practical issues: place for the thumbs, consistency of lines, glued or bound book, etc.

gkz & szp (delg) typo/page layout 64 / 98 grids textblock/margins industry standards: textblock sizes

◮ B/5 page size: around 123 mm 185 mm × ◮ A/4 page size: around 110 mm 155 mm ×

gkz & szp (delg) typo/page layout 65 / 98 grids textblock/margins textblock & sizes in a B/5 book (mm)

gkz & szp (delg) typo/page layout 66 / 98 grids textblock/margins textblock & margin sizes in a B/5 book (mm)

gkz & szp (delg) typo/page layout 67 / 98 grids textblock/margins height of textblock

◮ must be the exact multiple of the baselineskip (= height)

gkz & szp (delg) typo/page layout 68 / 98 grids textblock/margins height of textblock: example

◮ let’s assume baselineskip = 12 pt & textheight should be 185 mm ◮ how many lines can there be?

gkz & szp (delg) typo/page layout 69 / 98 grids textblock/margins height of textblock: example

◮ 185 mm = 524.4 pt, and so 524.4 / 12 = 43.7 lines ◮ either reduce the textheight to 43 lines (43 12 = 516 pt) × ◮ or enlarge it to 44 lines (44 12 = 528 pt) × ◮ the textblock height will not be exactly 185 mm but having an exact multiple of the baselineskip is a more important factor

gkz & szp (delg) typo/page layout 70 / 98 grids modular grids two-column grid: Journal of the Acoustical Soc. of America

gkz & szp (delg) typo/page layout 71 / 98 grids modular grids modular grids (Emil Ruder: Typography; 1967)

gkz & szp (delg) typo/page layout 72 / 98 examples

Some further examples of page designs/grid structure:

gkz & szp (delg) typo/page layout 73 / 98 examples Historia naturalis, N. Jenson, 1472

gkz & szp (delg) typo/page layout 74 / 98 examples R. Bringhurst: Elements of typographic style, 2005

gkz & szp (delg) typo/page layout 75 / 98 examples Biblia Polyglotta, C. Plantin, 1568

gkz & szp (delg) typo/page layout 76 / 98 examples Phaidon, catalogue, 2003

gkz & szp (delg) typo/page layout 77 / 98 examples The Illustrated London News, 1861

gkz & szp (delg) typo/page layout 78 / 98 examples Form + Zweck, journal, 1995

gkz & szp (delg) typo/page layout 79 / 98 examples L. Antal: A formális nyelvi elemzés, 2005

gkz & szp (delg) typo/page layout 80 / 98 vertical spacing: leading

leading (or: (base)lineskip, line/interline/interlinear spacing) Leading /l´EdIN/ is the distance in points from the of one line of type to the baseline of the line that follows (or precedes) it.

gkz & szp (delg) typo/page layout 81 / 98 leading solid leading (baselineskip = size)

e.g., 12/12 pt (“12 on 12 points”)

gkz & szp (delg) typo/page layout 82 / 98 leading positive leading (baselineskip > point size)

e.g., 12/14 pt (“12 on 14 points”)

gkz & szp (delg) typo/page layout 83 / 98 leading negative leading (baselineskip < point size)

e.g., 12/10 pt (“12 on 10 points”)

gkz & szp (delg) typo/page layout 84 / 98 leading common point sizes and leadings for publications

◮ 9/11 (e.g., footnote) ◮ 10/12 (A/5, B/5 book) ◮ 11/13 (B/5 book) ◮ 12/15 (home papers, theses)

gkz & szp (delg) typo/page layout 85 / 98 leading auto(matic) leading

automatic leading: some characteristics

◮“single” = solid leading, but around 1.2 of the point size 6 ◮ it is recommended to turn off automatic leading, and use manual/fixed leading (height of type area must be exact multiple of baselineskip!)

gkz & szp (delg) typo/page layout 86 / 98 text colour solid vs. positive leading

gkz & szp (delg) typo/page layout 87 / 98 text colour text colour

◮ leading influences text colour ◮ proportion of black and white on a page ◮ must be even, not dark (tight setting) or pale (loose setting) ◮ bad text colour affects legibility & readability!

gkz & szp (delg) typo/page layout 88 / 98 text colour legibility/readability legibility and readability

legibility the reader’s ability to easily recognize letterforms and the word forms built from them

readability the facility and comfort with which text can be comprehended

◮ Text with good readability must also be legible, but mere legibility does not make text readable.

gkz & szp (delg) typo/page layout 89 / 98 text colour legibility/readability

gkz & szp (delg) typo/page layout 90 / 98 text colour legibility/readability legibility and readability

legibility the reader’s ability to easily recognize letterforms and the word forms built from them

readability the facility and comfort with which text can be comprehended

◮ Text with good readability must also be legible, but mere legibility does not make text readable.

gkz & szp (delg) typo/page layout 91 / 98 text colour legibility/readability

colour/legibility/readability depends on the. . .

◮ design of (e.g., seriffed or sans font; size) ◮ leading ◮ spacing between words (word spacing) ◮ spacing between letters (letter spacing)

gkz & szp (delg) typo/page layout 92 / 98 text colour legibility/readability alternately tight letterspacing varying colour ⇒

gkz & szp (delg) typo/page layout 93 / 98 text colour legibility/readability tight spacing and legibility/readability

carnal cloth savvy

Font: LMRoman17

gkz & szp (delg) typo/page layout 94 / 98 text colour legibility/readability tight spacing and sans serif fonts

Font: Helvetica Neue LT Pro 55 Roman

gkz & szp (delg) typo/page layout 95 / 98 text colour legibility/readability optical (“subjective”) leading

gkz & szp (delg) typo/page layout 96 / 98 text colour legibility/readability optical leading: negative leading

gkz & szp (delg) typo/page layout 97 / 98 sample exam questions sample exam questions

Which is never part of the textblock?

1. footnotes 2. marginal notes 3. footer 4. folio

The area of the page that extends outside the cropped page is called

1. bleed 2. slug 3. press sheet 4. satellite

gkz & szp (delg) typo/page layout 98 / 98