BBN–ANG–183 Setting type on a pc, onscreen &

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

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

gkz & szp (delg) pc, onscreen, web typo 1 / 88 last time last time

◮ digital , formats ◮ how the handles fonts ◮ character & encoding ◮ and OpenType ◮ smart font options

gkz & szp (delg) pc, onscreen, web typo 2 / 88 aims aims for today

◮ systems on a computer ◮ markup vs. WYSIWYG ◮ electronic distribution of text ◮ ◮ preflighting ◮ setting type on the web

gkz & szp (delg) pc, onscreen, web typo 3 / 88 automation

from manual to automated typesetting

gkz & szp (delg) pc, onscreen, web typo 4 / 88 automation automated typesetting

– basic innovations of Gutenberg are still in use

gkz & szp (delg) pc, onscreen, web typo 5 / 88 automation automated typesetting

– some typographical features still lagging behind: ◮ proportional optical sizes ⇐⇒ scalable fonts ◮ fine typography (true , ligs, etc.) ⇐⇒ limited font technology ◮ BUT: OpenType fonts + Unicode... ◮ separation of logical markup from actual formatting ⇐⇒ WYSIWYG systems

gkz & szp (delg) pc, onscreen, web typo 6 / 88 automation automated typesetting – historical steps ◮ typewriters (1870s) – concept of escapement, monospaced letters

◮ machine typesetters: Monotype & Linotype (1880s until 1990s) ◮ phototypsetting (1970s) ◮ computerization (1980s)

gkz & szp (delg) pc, onscreen, web typo 7 / 88 automation automated typesetting: typesetting machines

◮ the Linotype & Monotype machines (1880s) ◮ the vs. Apple of the 1900s ◮ digital age: Linotype Library (1997) and Agfa Monotype/Monotype Imaging (1998); 2006: Linotype and Agfa Monotype merge, www.fonts.com; www.linotype.com; www.monotype.com

gkz & szp (delg) pc, onscreen, web typo 8 / 88 automation the Linotype machine (1930s)

gkz & szp (delg) pc, onscreen, web typo 9 / 88 automation the Monotype machine (1920s)

gkz & szp (delg) pc, onscreen, web typo 10 / 88 computerization computerized typesetting

◮ approaches to typesetting on ◮ examples of software

gkz & szp (delg) pc, onscreen, web typo 11 / 88 computerization markups traditional publishing process 1: pure text+logical markup

gkz & szp (delg) pc, onscreen, web typo 12 / 88 computerization markups the content: author’s typewritten manuscript

gkz & szp (delg) pc, onscreen, web typo 13 / 88 computerization markups traditional publishing process 2: logical → direct markup

gkz & szp (delg) pc, onscreen, web typo 14 / 88 computerization markups author’s typewritten manuscript with editor’s annotations

gkz & szp (delg) pc, onscreen, web typo 15 / 88 computerization markups traditional publishing process 3: direct m. → typesetting

gkz & szp (delg) pc, onscreen, web typo 16 / 88 computerization markups the traditional publishing process 4:

gkz & szp (delg) pc, onscreen, web typo 17 / 88 computerization markups final typeset and printed text

gkz & szp (delg) pc, onscreen, web typo 18 / 88 computerization markups example of markup today: HTML tags

Sanctum’s Breach

A rolling tremor passes ... hold more truth than fantasy ...

– how

,

, , etc. actually look like is defined in a separate style sheet

gkz & szp (delg) pc, onscreen, web typo 19 / 88 computerization markups advantages of the markup approach

◮ pure text (the content/information) is kept intact ⇒ text is human- and machine readable (searching, readers, etc.) ◮ structural and logical/functional information is preserved “this is a ”; “this is a title”; “this is an ”, etc. ⇒ document has a clear information/logical structure ◮ styling/form/output is independent & can be changed flexibly ⇒ styling is nondestructing, same information can be styled differently

gkz & szp (delg) pc, onscreen, web typo 20 / 88 computerization markups independence of content and style

gkz & szp (delg) pc, onscreen, web typo 21 / 88 computerization wysiwyg today’s publishing process: bad practices

◮ most well-known typesetting applications (all WYSIWYG) encourage bad practices ◮ do not separate composition of text from its typesetting/styling ◮ the author is distracted from composing content, in favor of making typographical choices all the time (sizes, font styles, indents, breaks, etc., etc.) ◮ idea of markup (logical or direct) is nonexistent ◮ documents often have no underlying logical structure ◮ encourages primitive formatting practices ◮ workflow is severely hindered & error-prone (especially for complex publications): e.g., changing one overall style for a logical function, or defining different styles for one given logical element

gkz & szp (delg) pc, onscreen, web typo 22 / 88 computerization aims today’s publishing process: aims

◮ keep composition of content & form/style separate using logical/direct markup ◮ still take advantage of computer’s capabilities

gkz & szp (delg) pc, onscreen, web typo 23 / 88 computerization aims today’s publishing process: 2 solutions

◮ solutions ◮ best: use non-WYSIWYG typesetting systems ◮ better: use stylesheets in WYSIWYG systems

gkz & szp (delg) pc, onscreen, web typo 24 / 88 computerization stylesheets stylesheets in WYSIWYG applications

◮ set of instructions that enables applying any formatting specifications at once ◮ make typesetting much quicker, reliable, consistent ◮ can create logical structure but still cannot recreate what a non-WYSIWYG application does: 100% separation of content & form

gkz & szp (delg) pc, onscreen, web typo 25 / 88 computerization stylesheets

demo: creating emphasis with a stylesheet

gkz & szp (delg) pc, onscreen, web typo 26 / 88 typesetting systems

which software should one use for which typesetting task?

gkz & szp (delg) pc, onscreen, web typo 27 / 88 typesetting systems typesetting software

task types

◮ simple, short documents (letters, memos, invitations...) ⇒ simple text editors or WYSIWYG word processors ◮ complex, large publications (, theses, dissertations, lots of tables, figures, , lists...) ⇒ dedicated non-WYSIWYG type setting systems ◮ newspapers, magazines (non-conventional , lots of images), typographic postproduction of manuscripts ⇒ WYSIWYG layout software (dtp’s)

gkz & szp (delg) pc, onscreen, web typo 28 / 88 typesetting systems word processors word processors

◮ WYSIWYG ◮ limited typesetting capabilities ◮ limited image-handling ◮ can be unstable (needs huge resources) ◮ printer setting often changes layout ◮ no font-embedding ◮ limited pdf output ◮ difficult to fully program (data in the file are hidden from user) ◮ not recommended for important and complex/large publications

gkz & szp (delg) pc, onscreen, web typo 29 / 88 typesetting systems word processors some WYSIWYG word processors

◮ ◮ Apple ◮ WordPerfect ◮ Adobe FrameMaker ◮ openoffice.org Writer (now called Libre Office) ◮ AbiWord

gkz & szp (delg) pc, onscreen, web typo 30 / 88 typesetting systems DTP DTP

◮ WYSIWYG ◮ sophisticated typesetting capabilities ◮ high-level image-handling ◮ font-embedding is possible ◮ advanced pdf and output ◮ difficult to fully program ◮ need lots of memory, cpu-power (slow on weaker pc’s) ◮ main purpose: laying out documents for printing (not for composition) ◮ most are very expensive

gkz & szp (delg) pc, onscreen, web typo 31 / 88 typesetting systems DTP DTP

◮ QuarkXpress ◮ Adobe InDesign ◮ ◮ ◮ Aldus/Adobe PageMaker ◮ (free)

gkz & szp (delg) pc, onscreen, web typo 32 / 88 typesetting systems DTP Adobe InDesign – screenshot

gkz & szp (delg) pc, onscreen, web typo 33 / 88 typesetting systems non-WYSIWYG non-WYSIWYG

◮ composition in an ASCII text editor, using markups (tags/commands) ◮ typesetting process and actual preview is separate ◮ it takes marked-up text as input and gives formatted text as output ◮ most important applications: TEX&LATEX http://www.tex.ac.uk/cgi-bin/texfaq2html ◮ used mostly by the science community

gkz & szp (delg) pc, onscreen, web typo 34 / 88 typesetting systems non-WYSIWYG creating a document in TEX & LATEX

gkz & szp (delg) pc, onscreen, web typo 35 / 88 typesetting systems non-WYSIWYG creating a document in TEX & LATEX

gkz & szp (delg) pc, onscreen, web typo 36 / 88 typesetting systems non-WYSIWYG creating a document in TEX & LATEX

gkz & szp (delg) pc, onscreen, web typo 37 / 88 typesetting systems non-WYSIWYG basic structure of a LATEX document

preamble/head: here we define the type and style of our document

body: the text of the document with formatting commands, introduced by \begin{document}

end: this is simply marked by the command \end{document}

gkz & szp (delg) pc, onscreen, web typo 38 / 88 typesetting systems non-WYSIWYG a basic LATEX source file

\documentclass[a4paper,12pt]{article} \begin{document} \title{My first \LaTeX\ document} \author{John Demo} \date{6 May, 2009} \maketitle \section{Introduction} This is an example text for the first section. \subsection{This is a subsection} This is some text in the subsection. \section{Another section} This is some text in the next section. \end{document}

... and its output:

gkz & szp (delg) pc, onscreen, web typo 39 / 88 typesetting systems non-WYSIWYG

gkz & szp (delg) pc, onscreen, web typo 40 / 88 typesetting systems non-WYSIWYG a basic LATEX source file with a footnote in Times \documentclass[a4paper,12pt]{article} \usepackage{times} \title{My first \LaTeX\ document} \author{John Demo} \date{13 May, 2008} \begin{document} \maketitle \section{Introduction} This is an example text for the first section.\footnote{This is a footnote.} \subsection{This is a subsection} This is some text in the subsection. \section{Another section} This is some text in the next section. \end{document}

gkz & szp (delg) pc, onscreen, web typo 41 / 88 typesetting systems non-WYSIWYG

gkz & szp (delg) pc, onscreen, web typo 42 / 88 finishing steps

now to the finishing steps. . .

gkz & szp (delg) pc, onscreen, web typo 43 / 88 finishing steps typical typesetting workflow

◮ designing, styling (markup) ◮ composition ◮ proofing, preflighting ◮ final printout using electronic distribution

gkz & szp (delg) pc, onscreen, web typo 44 / 88 distribution aim aims for final camera-ready electronic version

– you want to create a document with the following features and aims: ◮ high typographic quality ◮ interactivity within the file (e.g., hyperlinks) ◮ send document electronically ◮ preserve the state of all the elements of the document ◮ receiver should enjoy the same quality as you have, regardless the platform/monitor/printer they have ◮ file size to be (relatively) small

gkz & szp (delg) pc, onscreen, web typo 45 / 88 distribution packaging packaging

solution 1 collect & append all used fonts/images with the file

◮ cumbersome ◮ receiver may not be prepared to handle the files ◮ legal issues (fonts)

gkz & szp (delg) pc, onscreen, web typo 46 / 88 distribution packaging packaging

gkz & szp (delg) pc, onscreen, web typo 47 / 88 distribution pdf portable document format (pdf)

solution 2 convert your document into portable document format (pdf)

gkz & szp (delg) pc, onscreen, web typo 48 / 88 distribution pdf portable document format (pdf)

– why is pdf so attractive as an electronic document format?

◮ portability: platform/device/resolution independent, small size ◮ : standard language of the printing industry ◮ added enhanced features: ◮ compressed ◮ encryption ◮ annotations ◮ embedding: fonts & other files (images, audio, video) ◮ it looks like a document, but it is not a full document format (limited editing, extraction, but fully searchable!) ◮ free viewers and generators

gkz & szp (delg) pc, onscreen, web typo 49 / 88 distribution pdf portable document format (pdf)

– pdf also has some weaknesses and limitations:

◮ requires special attention with font management ◮ advanced settings ◮ pdf is a page description file format describing pages optimized for the web ⇒ it cannot be fully “formatted” (like a Word doc file): conversion from pdf back to “true” doc is very difficult ◮ rigid, “nonresponsive” format: not optimal for hand devices (Kindle, iPad, etc.)

gkz & szp (delg) pc, onscreen, web typo 50 / 88 distribution pdf creation pdf creation

some basic typical steps

1. create document in word-processor/dtp/typesetting software 2. 2 ways: ◮ obtain a pdf converter and “print to” pdf from within your word-processor, OR ◮ export to pdf 3. make sure you embed all the fonts your document uses 4. also set the following: ◮ “job” options (for highest quality: “press”) ◮ document restrictions (make sure you allow for at least printing) ◮ security level 5. check file/verify settings by opening in a reader/browser

gkz & szp (delg) pc, onscreen, web typo 51 / 88 distribution pdf creation pdf creation

gkz & szp (delg) pc, onscreen, web typo 52 / 88 distribution pdf creation pdf creation

gkz & szp (delg) pc, onscreen, web typo 53 / 88 distribution pdf creation some pdf generators

◮ Distiller (part of Adobe Acrobat) (www.adobe.com/products/acrobatpro/) ◮ : free creator from postscript (www.cs.wisc.edu/∼ghost/) ◮ pdfTEX/pdfLATEX: > pdf producers ◮ iText: based on Java, free (www.lowagie.com/iText/) ◮ OpenOffice.org: pdf exporter (www.openoffice.org/) ◮ Scribus: can export to pdf (www.scribus.net/) ◮ Microsoft Word 7 (needs extra free upgrade) ◮ ReportLab: Python-based converter (www.reportlab.org/) ◮ CutePDF: converter (www.cutepdf.com/) ◮ novaPDF: converter (www.novapdf.com/) ◮ PDFCreator: only Windows creator (www.pdfforge.org/products/pdfcreator) ◮ PrimoPDF (www.primopdf.com) ◮ nitro PDF Professional (www.nitropdf.com)

gkz & szp (delg) pc, onscreen, web typo 54 / 88 distribution pdf creation some pdf viewers

◮ Adobe Acrobat Reader (www.adobe.com/products/acrobat/readstep2.html) ◮ (www.foxitsoftware.com/pdf/rd_intro.php) ◮ Sumatra PDF (http://www.sumatrapdfreader.org/) ◮ Xpdf (www.foolabs.com/xpdf/download.html) ◮ GhostView (GhostScript) (www.cs.wisc.edu/∼ghost/)

gkz & szp (delg) pc, onscreen, web typo 55 / 88 distribution pdf creation

– two contradictory expectations: 1. small file size, quick (web) opening (for email/web) 2. making sure all are embedded (for print shop)

gkz & szp (delg) pc, onscreen, web typo 56 / 88 distribution pdf creation font embedding

3 ways: 1. embed the whole font ◮ best for print shop ◮ pdf becomes editable ◮ legal problems (font piracy) 2. embed only a subset of the font (only some characters) ◮ best for email/web ◮ pdf is not fully editable 3. no embedding: assumes that the recipient has the same font; should be avoided

gkz & szp (delg) pc, onscreen, web typo 57 / 88 distribution pdf creation advanced pdf settings

gkz & szp (delg) pc, onscreen, web typo 58 / 88 distribution font embedding advanced pdf settings: font embedding

gkz & szp (delg) pc, onscreen, web typo 59 / 88 distribution font embedding font embedding

◮ Embed all fonts ◮ Subset embedded fonts when percent of characters used is less than ◮ 100 % = for any font, if the document uses a subset of characters from that font, always include only that subset of characters (= not the whole font) ◮ 0 % = include all characters from any font used (= include the whole font)

gkz & szp (delg) pc, onscreen, web typo 60 / 88 distribution font embedding checking font embedding in Adobe Reader

gkz & szp (delg) pc, onscreen, web typo 61 / 88 distribution legal font embedding issues

– why is the fuss about font embedding and subsetting? ◮ full portability ◮ file size ◮ font legal issues

gkz & szp (delg) pc, onscreen, web typo 62 / 88 distribution legal font embedding issues

– extract from Emigre’s End User License Agreement (EULA):

“While the Emigre Fonts EULA generally prohibits the embedding of fonts in digital documents, an exclusion is made if the licensee can guarantee that all recipients of the PDF (and embedded fonts) are covered by a user license from Emigre. For example, if a font user and the service bureau are both licensed for the fonts, then transfer of font embedded PDF files is allowed between these two parties. containing embedded fonts may be exchanged freely between two parties, subject to the following conditions: 1. Both parties must be licensed for the fonts being embedded. 2. Subsetting must be used for any font embedding. 3. The PDF must have security set to allow only printing and viewing; it must prohibit changing, selecting, or adding.” (www.emigre.com/Embedding.php)

gkz & szp (delg) pc, onscreen, web typo 63 / 88 distribution preflighting end of composition: preflighting – checking the document for typesetting-related errors

gkz & szp (delg) pc, onscreen, web typo 64 / 88 distribution preflighting preflighting

gkz & szp (delg) pc, onscreen, web typo 65 / 88 distribution preflighting preflighting: what to look out for

◮ all fonts are embedded ◮ colour model of image objects ◮ colour models: RGB vs. CMYK (“cyan–magenta–yellow key”) ◮ RGB: projected colour-lights ◮ CMYK: reflected colour-lights (=printing) ◮ images must not be in RGB model ◮ only grayscale or CMYK must be used for printing

gkz & szp (delg) pc, onscreen, web typo 66 / 88 web

web typography

gkz & szp (delg) pc, onscreen, web typo 67 / 88 web web typography – modular webpages

gkz & szp (delg) pc, onscreen, web typo 68 / 88 web web typography – modular webpages

gkz & szp (delg) pc, onscreen, web typo 69 / 88 web web typography – modular webpages

gkz & szp (delg) pc, onscreen, web typo 70 / 88 web web typography – modular webpages

gkz & szp (delg) pc, onscreen, web typo 71 / 88 web web typography – modular webpages

gkz & szp (delg) pc, onscreen, web typo 72 / 88 web web typography – modular webpages

gkz & szp (delg) pc, onscreen, web typo 73 / 88 web HTML & CSS web typography: HTML & CSS

◮ the language of web pages strictly separates content/logical structure & form/style ◮ HTML (hypertext markup language): defines content/logical structure with markup tags (logical and direct) ◮ CSS (cascading style sheet): defines styling of the logical elements separately

gkz & szp (delg) pc, onscreen, web typo 74 / 88 web HTML & CSS CSS

– ease of update & maintenance: one CSS for a whole

gkz & szp (delg) pc, onscreen, web typo 75 / 88 web HTML & CSS CSS

– portability: one content for several output devices

gkz & szp (delg) pc, onscreen, web typo 76 / 88 web HTML & CSS CSS

– sample CSS syntax (a CSS rule)

gkz & szp (delg) pc, onscreen, web typo 77 / 88 web HTML & CSS CSS

– sample CSS syntax (a CSS rule)

gkz & szp (delg) pc, onscreen, web typo 78 / 88 web HTML & CSS CSS

– sample CSS syntax (a CSS rule)

gkz & szp (delg) pc, onscreen, web typo 79 / 88 web HTML & CSS

demo: HTML & CSS

gkz & szp (delg) pc, onscreen, web typo 80 / 88 web HTML & CSS sample CSS style properties

◮ font-family ◮ font-style ◮ font-size ◮ font-variant (small-caps) ◮ font-weight ◮ text-decoration (underlining, overlining) ◮ color ◮ letterspacing ◮ lineheight ◮ ◮ text-align ◮ list-style, etc. etc.

gkz & szp (delg) pc, onscreen, web typo 81 / 88 web HTML & CSS font-related problems in the standard CSS approach

◮ fonts requested by CSS have to be installed on the client machine ◮ only safe with the default “web-safe” system fonts: , , , , ◮ request of unavailable font: fall back to system font ◮ no font embedding is possible, severe copyright issues ◮ pictures? – problematic: ◮ file size ◮ resolution ◮ no searching, no hyphenation ◮ visually-impaired people cannot hear it

gkz & szp (delg) pc, onscreen, web typo 82 / 88 web @font-face the @font-face rule

– things for consideration: ◮ you want the same typographic freedom as for print ◮ optimal rendering on all kinds of screen ◮ high-level typography (OT smartfont options) ◮ for all browsers ◮ for all languages ◮ protection of font data, licensing issues

◮ solution: ◮ the @font-face CSS rule, and ◮ web fonts

gkz & szp (delg) pc, onscreen, web typo 83 / 88 web @font-face the @font-face rule

◮ allows the browser to use a font from an external server, it doesn’t have to be on client machine ◮ your own server: you must own license to host the font ◮ from a font-hosting service

gkz & szp (delg) pc, onscreen, web typo 84 / 88 web @font-face some web font hosting services

◮ www.google.com/fonts (free fonts) ◮ www.fontsquirrel.com (free fonts) ◮ www.typekit.com (Adobe) ◮ www.typography.com (Hoefler & Co.) ◮ www.webtype.com ◮ www.myfonts.com (not only webfonts)

gkz & szp (delg) pc, onscreen, web typo 85 / 88 web @font-face current web font support with @font-face

(http://caniuse.com/#search=%40font-face)

gkz & szp (delg) pc, onscreen, web typo 86 / 88 web @font-face web font formats: no one standard. . .

◮ Embedded Open Type (eot): only for ◮ font (svg): mostly for OS X & iOS ◮ TT-flavoured OpenType (ttf): , Chrome, Android, ◮ (woff, woff2): Chrome, Firefox, Opera – this format is what is now fully ratified by the WC3 consortium

gkz & szp (delg) pc, onscreen, web typo 87 / 88 web @font-face

demo: Google webfonts, @font-face, CSS

gkz & szp (delg) pc, onscreen, web typo 88 / 88