Typography Typography » typos (form), graphe (write) » the science of type » arrangement of glyphs – typesetting » type designer ≠ typographer » originally – especially a matter of printing » currently – much more extensive Typography Typography in time Typography in space Digital typography Tools » Adobe InDesign, Affinity Publisher, TeX, QuarkXPress, … Robert Bringhurst – The elements of Typographic style, webtypography.net Richard Rutter – Web Typography Carolina de Bartolo a Erik Spiekermann – Explorations in Typography explorationsintypography.com Erik Spiekerman – Stop Stealing Sheep & Find Out How Type Works Filip Blažek – Typokniha Martin Pecina – Knihy a typografie 365typo – yearbook and web The end of the Middle Ages 1453 End of the Byzantine Empire 1492 Discovery of America 1453 End of the Byzantine Empire, 1492 Discovery of America The invention of letterpress » by Johannes Gutenberg around 1450 » the principle is in the use and reuse of moving letters » the biggest revolution in the dissemination of information from the origin of writing to the time of the Internet Predecessors of letterpress » relief printing » China and Korea has the lead – 11th century » clay and wooden punches used since ancient times » Disk of Faist – 1700–1600 BC » 1423 – Saint Christopher, one of the first woodcuts » woodblock printing, block books Predecessors of letterpress Johannes Gutenberg » 1397–1468, Strasbourg, Mainz » trained goldsmith, inspired by bookbinding punching » concealed his invention – competition » difficult to finance the invention Partial inventions » complexity » the matrix and hand casting machine for making the metal sort » type metal – lead, tin and antimony » printing press » printing ink – soot with varnish » a number of other small inventions » the most important work is a two-volume Latin Bible, set in 42 lines in two columns in a beautiful symmetrical slim typeface, decorated with hand-painted initials and miniatures, printed on paper and parchment » typeface maximally imitated the written types of its time Gutenberg Bible Spread of letterpress » letterpress spread rapidly throughout Europe » period of first prints (incunabula) is up to 1500, by this year around 30,000 titles had been printed in 252 places » the first printed book in our territory is The Chronicle of Troy – in Pilsen 1476 (also first in Czech language) » technology no longer changes, only improves Cast metal sort » metal prism with embossed mirror image of the glyph » raised – glyph, reduced area around – shoulder » word font derives from French fonte – melted, casting » size of glyphs is given in points » real glyph size can be different even at the same number of points (for example, a different x-height) Measure units 13° Svijanská Svijanská kněžna 13pt13pt 13pt Em space » the size of the square given the point size of glyph » is used to horizontal measure » proportional and non-proportional typeface » earlier for calculating the typesetting range, today, for example, when defining the width of spaces and dashes em-7 13 5 18 square square » measuring systems are not based on the metric system » typographic measures introduced Pierre Simon Fournier, 1712–1768, French Age-of-Enlightenment printer, engraver and typography theorist, made typography a science, his units are based on the French foot Typographic measures » Francois Ambroise Didot, 1730–1804, improved the Fournier system (European measuring system) » the Didots were a family of innovators in the field of typography Didot’s measuring system 1 point = 0,3759 mm 12 points (1 cicero) = 4,513 mm Current measuring system » Anglo-American system based on English foot » came up with the Monotype typesetting machines » due to the origin of most DTP programs in the USA, it has spread to the whole world 1 point = 0,3528 mm 12 points (1 pica) = 4,23 mm Giambattista Bodoni » 1740–1813, Italian typographer » created a Manual of Typography with lots of typeface specimens » he cared about the perfect layout composition Pantograph » thanks to pantograph it was easier to reduce design of glyphs into real sizes » its major improvements brought American Linn Boyd Benton, 1844–1932, his device was able to vary narrowing and widening of glyphs and their inclination » its principle is the basis for today’s PostScript Linotype » is another shift in letterpress technology, especially in its speed » the Linotype machine was invented in 1884 by Ottmar Mergenthaler, it was able to set and cast entire rows at once » a little younger Monotype then cast individual letters » however, setting was of lower quality – the same accent glyphs height, the same width of different styles » in 19th century, the quality of handicrafts often suffered by industrialization » efforts to recover quality crafts began to appear » Arts and Crafts movement and activities of English versatile artist William Morris, who sought a renaissance of typography and book culture Arts and Crafts movement Eric Gill » 1882–1940, British sculptor, carver and typographer, William Morris and Edward Johnston follower » the book is intended for reading and its typesetting should be appropriate to its content » he wrote about the choice of typeface, spacing, format, layout construction… Eric Gill – Essay on Typography Avantgarde typography » with the avant-garde of the first half of the 20th century work with type radically changes, established compositional principles and classical rules are being broken down and new rules are being introduced » Futurist typography and the Liberated Text » Dadaism – Kurt Schwitters, Theo van Doesburg Avantgarde typography » Russian Constructivism – El Lisickij, Rodchenko Avantgarde typography » 1902–1974, typographer, theorist, teacher on Bauhaus and spokesman of avant-garde typography » book New typography – manual and manifesto of the modern concept of typo and graphic design » he rejected ornamentalism, he recommended sans-serif, asymmetry » from 1946 he worked for the British publishing house Penguin Jan Tschichold » 1900–1951, Czech art theorist, publicist, artist and typographer » leading figure of the Czech avant-garde, Devětsil association… » edited the ReD magazine, which he also designed » published the study Modern Typo » he also lectured at the Bauhaus Karel Teige Karel Srp – Karel Teige a typografie Guillaume Apollinaire Calligrams Václav Havel Antikódy Eduard Ovčáček Lettrismus » after the war, Switzerland became the center of typography and graphic design, following the interwar avant-garde » cleanness, readability, and objectivity are promoted; use of a grid » it is associated with the font Helvetica and Univers and the names Frutiger or Zapf International Typographic Style » early 1960s » setting type by using a photographic process to generate columns of type on photographic paper or film Phototypesetting » phototypesetting has enabled high performance and automation, existing font families are being expanded by additional styles, the production of various typefaces is also increasing Phototypesetting » Oldřich Hlavsa – Typografia 1, 2, 3 Phototypesetting Typographer Oldřich Hlavsa » the massive rise of personal computers in the 1990s expanded the typesetting options and accelerated it several times over Digital typesetting » 1965 – the first CRT (Cathode Ray Tube) exposure unit by Rudolf Hell » 1975 – Ikarus Computer System, which automates typedesign » 1980 – the electronic typesetting system is definitively developed » 1983 – PostScript language developed (Bézier curve, Type1) » 1991 – TrueType format (B-spline, ttf) » 2000 – OpenType format (otf) » 2009 – Web Open Font Format (woff) Digital typesetting Punk typography » Jamie Reid – text collage Grunge typography » David Carson – Ray Gun magazine Stefan Sagmeister AIGA Detroit poster Typesetting Basic typesetting » basic text » from one type, style and size of font, with uniform adjustment of paragraphs (width, alignment...) » demands for undisturbed continuous reading » e.g. fiction Mixed typesetting » set with basic and highlight sections, which distinguish parts of the text (words, sentences, paragraphs), there can be several types and degrees of font, different paragraphs » bold, italics, capitals, underlined, interspersed » e.g. dictionaries, textbooks, scholar literature » mixed typesetting in which there are special technical glyphs and symbols; ordinal and table typesetting » can be further divided into e.g. mathematical, chemical, physical (fractions, indexes, equations) or music, but also includes registers and lists » often set with specialized software Technical typesetting Casual typesetting » typesetting of occasional printed matter with more demanding graphic design » e.g. book covers, magazine and newspaper typesetting, mercantile, invitation cards, menus, certificates... » subject to fashion, is individual, has looser rules, closer connections with graphic elements and images » is the arrangement of text, pictures and graphic elements on a page, including columns and margins » the rules for its construction are proven by history, they are based, for example, on the optical center of the page, on practical specifics and other subjective requirements Page layout » it is a group of words or sentences ending paragraph break (enter) » no forced line break (shift + enter) Paragraph » enter line – indent first or following lines, same alignment with text » indentation between the paragraphs, additional enter or graphical breaks Paragraph separation Atis sant, to eseceatur sam sitibus idelest, con et latum, sequi audande et mo bearum in conet aute sit verundita is et andae vendaepra vid quat veliquibea delit, coria vernamu stiandi dem eum andi alis vendam excepudaeria aliciam autem facieniet rest volendisquam volorias alitasin. Atis sant, to eseceatur sam sitibus idelest, con et latum, sequi audande et mo bearum in conet aute sit verundita is et andae vendaepra vid quat veliquibea delit, coria vernamu stiandi dem eum andi alis vendam excepudaeria aliciam autem facieniet rest volendisquam volorias alitasin. Atis sant, to eseceatur sam sitibus idelest, con et latum, sequi audande et mo bearum in conet aute sit verundita is et andae vendaepra vid quat veliquibea delit, coria vernamu stiandi dem eum andi alis vendam excepudaeria aliciam autem facieniet rest volendisquam volorias alitasin. Atis sant, to eseceatur sam sitibus idelest, con et latum, sequi audande et mo bearum in conet aute sit verundita is et andae vendaepra vid quat veliquibea delit, coria vernamu stiandi dem eum andi alis vendam excepudaeria aliciam autem facieniet rest volendisquam volorias alitasin. • Atis sant, to eseceatur sam sitibus idelest, con et latum, sequi audande et mo bearum in conet aute sit verundita is et andae vendaepra vid quat veliquibea delit, coria vernamu stiandi dem eum andi alis vendam excepudaeria aliciam autem facieniet rest volendisquam volorias alitasin. • Atis sant, to eseceatur sam sitibus idelest, con et latum, sequi audande et mo bearum in conet aute sit verundita is et andae vendaepra vid quat veliquibea delit, coria vernamu stiandi dem eum andi alis vendam excepudaeria aliciam autem facieniet rest volendisquam volorias alitasin. Paragraph alignment justified centred flush left flush right » used most often » all lines are automatically aligned to the same length by adjusting the space between words » not recommended for narrow columns, it causes large gaps Justified alignment Atis sant, to eseceatur sam sitibus idelest, con et latum, sequi audande et mo bearum in conet aute sit verundita is et andae vendaepra vid quat veliquibea delit, coria vernamu stiandi dem eum andi alis vendam excepudaeria aliciam autem facieniet rest volendisquam volorias alitasin.Genditem ari dis volorer natiossed evenim am, cus sit faciur? Qui bearcie nimolorios est ut pel ellaccu ptaerci isseque nistiur? Sed et ipsam ellia eiusant voluptate quibusdae. Nam quam earum, suntiunt aut eos min ea eicidesti doluptur? Obis atibus dolesciet esequo cuptasp iendite simaioruptur autendi sim adit, vellanto modis vendaer ibustorum esed magnam sinullu ptatur sequam ant modit, as eatur, ut quas asit duscil int denditiisit essequis entibus. Vendi aut aut de et, sitet voles dit eos dolorent la quunt hiciisque entiost rumquuntur recuptaqui delitis solum aut qui odiant utatem a con pro dit enisi aut alita velia pratempore, si aut quiaspedis audaestibus dolorpost ute eos et as aut ad ullam lautatio. Mus ut rerunt veribearum facia nosam voloressim re nonsect urendel. Atis sant, to eseceatur sam sitibus idelest, con et latum, sequi audande et mo bearum in conet aute sit verundita is et andae vendaepra vid quat veliquibea delit, coria vernamu stiandi dem eum andi alis vendam excepudaeria aliciam autem facieniet rest volendisquam volorias alitasin.Genditem ari dis. » the distance between words is constant, the lines are of different lengths » flush right causes worse legibility of the text, the eye is looking for consecutive lines, it is recommended to use exceptionally Left and right alignment Atis sant, to eseceatur sam sitibus idelest, con et latum, sequi audande et mo bearum in conet aute sit verundita is et andae vendaepra vid quat veliquibea delit, coria vernamu stiandi dem eum andi alis vendam excepudaeria aliciam autem facieniet rest volendisquam volorias alitasin. Genditem ari dis volorer natiossed evenim am, cus sit faciur? Qui bearcie nimolorios est ut pel ellaccu ptaerci isseque nistiur? Sed et ipsam ellia eiusant voluptate quibusdae. Nam quam earum, suntiunt aut eos min ea eicidesti doluptur? Obis atibus dolesciet esequo cuptasp iendite simaioruptur autendi sim adit, vellanto modis vendaer ibustorum esed magnam sinullu ptatur sequam ant modit, as eatur, ut quas asit duscil int denditiisit essequis entibus. Atis sant, to eseceatur sam sitibus idelest, con et latum, sequi audande et mo bearum in conet aute sit verundita is et andae vendaepra vid quat veliquibea delit, coria vernamu stiandi dem eum andi alis vendam excepudaeria aliciam autem facieniet rest volendisquam volorias alitasin. Genditem ari dis volorer natiossed evenim am, cus sit faciur? Qui bearcie nimolorios est ut pel ellaccu ptaerci isseque nistiur? Sed et ipsam ellia eiusant voluptate quibusdae. Nam quam earum, suntiunt aut eos min ea eicidesti doluptur? Obis atibus dolesciet esequo cuptasp iendite simaioruptur autendi sim adit, vellanto modis vendaer ibustorum esed magnam sinullu ptatur sequam ant modit, as eatur, ut quas asit duscil int denditiisit essequis entibus. » the same disadvantages as the flush right text » looks ceremoniously, often used for typesetting invitations, certificates, book titles... Centred alignment Atis sant, to eseceatur sam sitibus idelest, con et latum, sequi audande et mo bearum in conet aute sit verundita is et andae vendaepra vid quat veliquibea delit, coria vernamu stiandi dem eum andi alis vendam excepudaeria aliciam autem facieniet rest volendisquam volorias alitasin. Genditem ari dis volorer natiossed evenim am, cus sit faciur? Qui bearcie nimolorios est ut pel ellaccu ptaerci isseque nistiur? Sed et ipsam ellia eiusant voluptate quibusdae. Nam quam earum, suntiunt aut eos min ea eicidesti doluptur? Obis atibus dolesciet esequo cuptasp iendite simaioruptur autendi sim adit, vellanto modis vendaer ibustorum esed magnam sinullu ptatur sequam ant modit, as eatur, ut quas asit duscil int denditiisit essequis entibus. » rather artistic, experimental concept (e.g. poems) Off-axis alignment » streamline work at a mixed typesetting Paragraph styles Line spacing » space between lines » most often it is 120% of the font size, the font size 10 pt should have a spacing of 12 pt, it is marked with a number after the slash 10/12 » the larger the spacing, the better the text is readable and the more airy the typesetting Atis sant, to eseceatur sam sitibus idelest, con et latum, sequi audande et mo bearum in conet aute sit verundita is et andae vendaepra vid quat veliquibea delit, coria vernamu stiandi dem eum andi alis vendam excepudaeria aliciam autem facieniet rest volendisquam volorias alitasin. Atis sant, to eseceatur sam sitibus idelest, con et latum, sequi audande et mo bearum in conet aute sit verundita is et andae vendaepra vid quat veliquibea delit, coria vernamu stiandi dem eum andi alis vendam excepudaeria aliciam autem facieniet rest volendisquam volorias alitasin. Atis sant, to eseceatur sam sitibus idelest, con et latum, sequi audande et mo bearum in conet aute sit verundita is et andae vendaepra vid quat veliquibea delit, coria vernamu stiandi dem eum andi alis vendam excepudaeria aliciam autem facieniet rest volendisquam volorias alitasin. Baseline grid » in books, magazines and newspapers, the baseline is most often aligned so that all lines of opposite pages or columns are the same height » in the typesetting programs they are aligned on the so-called baseline grid Orphans » orphans and widows should not occur at a correct typesetting » orphan is the last line of the paragraph that overflowed to the beginning of the next column Atis sant, to eseceatur sam sitibus idelest, con et latum, sequi audande et mo bearum in conet aute sit verundita is et andae vendaepra vid quat veliquibea delit, coria vernamu stiandi dem eum andi alis vendam excepudaeria aliciam autem facieniet rest volendisquam volorias alitasin. Ici sinci nus, quia doluptaquas nectios incti conse con. Parionseque dolenis suntem eum am que pro qui ut la pernatque aut ea corest, officiam et vendandam ut et ommolupitfaceperepudanduntenobis eni officid itinia et qui voloresci desti quiae. It que nisquo tem eumquame sam dic to etur? Ota nus ex eicatus quati quossitas pa ipsunt re. Widows » widow is the first line of the paragraph that remains at the end of the previous column » it shall be resolved either by shortening or extending one of the preceding paragraphs (letters or words spacing, slight letters deformation) so that the line is pulled back or pushed forward or two lines are created Atis sant, to eseceatur sam sitibus idelest, con et latum, sequi audande et mo bearum in conet aute sit verundita is et andae vendaepra vid quat veliquibea delit, coria vernamu stiandi. Ici sinci nus, quia doluptaquas nectios incti conse con. Parionseque dolenis suntem eum am que pro qui ut la pernatque aut ea corest, officiam et vendandam ut et ommolupit faceper epudandunte nobis eni officid itinia et qui voloresci desti quiae. It que nisquo tem eumquame sam dic to etur? Kerning » adjust the spaces between each glyph pair » usually kerning is already sufficiently resolved when creating the font, but for example in big titles it is often necessary to adjust it » quiz to determine the correct word kerning Type Method – type.method.ac Kerning