eBook Typography

July 24, 2019 posted by

okay welcome to this presentation on eBook typography what am I going to be covering today here's a little diagram of what we have in this presentation I'm gonna talk about embedding fonts I'm gonna talk about the space that we have available to us in our ebooks and what kind of embellishments what about color what about borders and so on and then headings headings are very important having subheadings and so on what can we do with these headings what about landscape and portrait now tablets can be viewed either in a horizontal format or vertical format what happens when we when we do this what happens when we turn our are the devices round and what control do we have over this columns can we use columns what's a page exactly what are we how do we control the page break how do we be sure that what we have is going to be on that page not move on to the next page and widows and orphans can we use those can we add content so for example can we have something at the end of each paragraph or end of each section and can we repeat that automatically can we use tables and what about asides without sidebar information footnotes and hyperlinks and so on and then finally do we have any special effects that we should talk about how about drop caps and reversing outs and shadows and so forth sorry about this but I'm going to do a shameless plug for my book ebook typography on which this is this presentation is based available from all good eye book stores on the Apple iBookstore first of all let's just talk very briefly about three different kinds of e-books because their publishers really do have a decision to make here about what kind of be book to create reflowable first of all which is what I'm mostly referring to in my presentation today but the user can change many visual attributes of the book user can change the font the font size and so forth on the other hand publishers can create a fixed layout book just like the printed page and then what happens here is that the user can't really change anything they get what they see they see what they get but what they see on the other hand there might be lots of bells and whistles that you want to add it may be that you don't want to use the user interface of the e-book reader such as iBooks you might want to create your own and for that you're gonna need to create an app and deliver that as a book so maybe you create something like the the wasteland the beautiful wasteland which is created by touch press okay reflowable books they're great for users of e-books because the user can change the typeface and the size of the font the content area though is fluid so the typography and the designed for is actually quite elusive for the designer you don't really know what what is going to happen when the user increases the font size it's very hard to determine where the content finishes at the bottom of the page for example in Riefler ebooks the designer is able to initialize the design in other words to make what is is required they want to begin with but you need to really think about this dynamic space and this is very why put web –is– here is because this is really a kind of web design type of concept we're dealing with a fluid space so as on a web page the website can be viewed in a number of different ways so the user of a website can change their window size and so forth we can find control the attributes of the styling with CSS with cascading style sheets but if you're tending to use a WYSIWYG tool of what you see is what you get tools such as InDesign for page layout don't be lulled into thinking that what you're seeing on the page is what the user is going to get in the final ebook the key to all of this is attention to detail you really must make sure that all of your typographers quotes are in there rather than these inch marks or screw kit users what do we call them chicken scratchings some people refer to them as so you need those proper curly quotes in design if you're using InDesign will will cope with that for you but if you're not using InDesign make sure that you put those back into your HTML as you can see here on this presentation slide I'm actually showing that it is also possible to use different language versions of of the of these quotes okay so what about fonts now this is an important element to this what kinds of fonts can we use and how do we embed them if you want to embed your font you can do that but different devices aren't challenging that is to say not all devices will support all of the fonts all of the font types indeed so you may have to compromise so let's say you've built something for print and you're now ready to take that into an e-book there may be some situations where you have to change the fonts and whatever you do avoid building your textures image don't try to avoid the idea of having for example captions or headings are built as images rather than text because then of course what's happening is you're preventing the users from using the search facility within the e-book reader different devices are different so tablets and e-readers have their own fonts built into them so if you have a Kindle if you have a nuke if you have a a Kobo device they have their own fonts the iPod pad has a very large range of fonts that you can use so if you know what these fonts are and in fact in my book I do list them all there are websites as well as well that lists the fonts that are available on iOS devices if you choose those fonts to use in your eBook then you don't necessarily have to embed them if you're targeting that particular device be careful not to use too many fonts and too many fonts embedding you're going to get file bloat you're going to get a very large file of you if you do so be aware as well that there are rights issues so for example can we really use the font is it is it licensed for us to do that and do we have the permission now in design when it embeds the font in the ebook will obfuscate the font and in other words make it impossible for people to extract and reuse in some other form however some fonts still do not approve of you embedding them into an ebook so really be aware of what the license additions are there are different font formats including wofe OpenType true type it may be that some devices don't support true type because it's not really in the specification for the latest epub 3 so true type is supported on some devices but it may be that you need to consider thinking about moving towards open type because that's an endorsed format by the book for the epub 3 format now it is possible for the user to control the way that the fonts are used in reading experience and so as you can see here I've got an image of the font selector on the iPad and it's got original ticked on here that means that the font has been embedded by the book creator and then there are a number of other fonts available too for the user to select now what by selecting a font this would change all of the paragraphs text that is to say all of the body text anything that is effectively marked up with the P or paragraph HTML element will be changed however heading Styles will remain as designed so in other words the the the iBooks reader will respect the designers choice of headings those will stay as they are the user can change the font size they can either increase or decrease the font size and so in a sense you need to be aware of what your starting point is be also aware that if the user has changed the font size for another book on their in their library on their device that is respected throughout all of the books that they're reading so they may come to your book already having increased or decrease the font size you don't have any control over the initial stage of the or state of the font size now this is just an example of what happens with other devices so here for example is a Kindle if you've converted your ebook to the Kindle format on a Kindle we can do or we can do this sort of thing we can change the font size we can also change the line spacing and the margins as well as of course choosing a different font and this is just an example other devices for example on the Cobo here's an image from her from a basic Kobo device and as you can see we can also change the font size the line spacing and margins on an iBook we can adjust the margins as a reserve user of the advice but as you can see here we can also select justification as well as another another thing that we can change okay moving on now to spacing the page itself has it's already has its margin set although as you can see in the previous two examples there are some cases where the user has control over the margins your content area is limited in a reflow eBook because the margin what you're setting as a margin as a book designer is inside that device margin here is an example of a page in a in my ebook typography book which is actually just demonstrating what that page space is available so you have on the iPad that amount of space the margins around it are not available to you in a reflow bleed book so be aware that when you set margins on your page using CSS margin left margin right etc you're moving inside that space that's defined there by the yellow box spacing of paragraphs yes you can apply margins to paragraphs don't add empty breaks for space don't simply hit the return key between paragraphs because that space might collapse since space will be ignored in the e-book however never good practice of course to use empty paragraphs for spacing use margin or first line indent to define a paragraph be generous with your paragraph spacing that's my own preference but you know obviously be aware as with ebooks you don't have a limitation in terms of the paper that you're using so you've got plenty of space so use it generously first line indent is a traditional way that you might indicate a paragraph but I advise you not to be too subtle with that you know make it really appear as if there is a paragraph you don't want an indent on first paragraph after the heading of course but then you know that's book designers will be aware of that you could of course use a drop cap or an elevated cap to indicate the beginning of a pack of a paragraph or a section say don't overuse these things okay so you can space wording it is possible CSS does have word spacing but you're not necessarily going to find that coming across from InDesign even if you can use it in InDesign you're not going to get it exactly translating into the e-book now at UB you need to be aware of how you are justifying your text and we should really really discuss that in a moment now left align text will produce a comfortable word spacing of course so in other words you're going to have ragged right centering text is possible but I only advise you to do that for your headings not large amounts of text justifying the text can work at large font sizes as so it can't work at larger font sizes I should say but justification you should be aware is possible to be switched on by the user let's just have a look at that in a moment so here we are with justified text the iPad user for example can control for the body text they can actually decide that they want this text to be justified you can see here the image which represents the panel of the configuration for the iBooks app and as you can see we can turn on or off full justification together with Auto hyphenation however if you as a book designer specifically say in your CSS within the e-book text-align:left then that will be respected so the user can't change that if you use justified text in other words if you force your text to be justified then please be sure to switch on hyphenation as well because otherwise what you're going to find at large font size is that you're gonna get some ugly spacing between the words which brings me to letter spacing you can in InDesign use tracking as it's called this will not necessarily translate to the correct CSS for letter spacing but you can use that in CSS so we're here what we're talking about here really is post editing the CSS once you've exported from InDesign some fonts of course support kerning pairs and but again it's not just that it's the font it's also device dependence so some some devices won't will simply ignore kerning pairs within the font even if you have somehow managed to turn them on so here's an example the the we've got two different thing about three different things going on here with this particular font this particular font has kerning so the a and the V are pulled together as you can see in the word Aviva and then we also have some ligatures available in this font so the the F and the L are bonded together the F and the AI are bonded together in as you can see we we then lose the dot over the I so if you choose to turn this on then you will get that happening on some devices with some fonts again it's I would say experiment you can see in this font we also have rather fancy finial as its called so if though if the letter in the italic face of this font is at the end of the word and followed by a space in other words then you can see that you you get this this lovely swirl on the letter e now I should talk about poetry in verse because this is a special Kaiser case since the line endings should be respected and wherever possible by the way that the poets originally conceived of this so if what is going to happen here is however there's a like if the lines are quite long then the font the the line of text I should say will be broken if the user increases the font size and so in a sense you have to think about this because what is going to happen is that the the next line or the line that breaks the the text that moves on to the next line you might need to think about how you define that and carefully so that doesn't appear as if it's the second or another line in the line of poem so the way that I tend to do this is use a negative first line indent on the line so sorry should just go back one step the line itself needs to be in a paragraph so each line is a paragraph rather than us with a soft break at the end and so that's giving it a full paragraph for each line gives you a lot more control over the spacing and as you can see here the indenting so here I've got a text indent of minus 30 pixels but a padding on the left of 60 pixels therefore giving me a general overall 30 pixel indent with another 30 pixel when that line breaks if the line is too sure space is too short to accommodate the whole line okay what about embellishments well we can use color of course that's the first thing I should emphasize this because color is not going to cost you any more in your eBook so even if you are coming from a black and white book in other words a printed book that's printed in black on white on a white stock yes you know we can use color we can use color in headings particularly we can even reverse out of solid color and then we can use the highlighted text within the paragraphs and so on be aware though that you must make sure that you're going to get contrast for good readability don't put you know dark colors on dark backgrounds and also test on black and white devices don't forget you're double your ebook may look great on an iPad but what's it going to look like when it's shown on a black and white Kindle or Kobo okay borders and we can use borders on text we can surround box of lots of text with borders and use use these borders rather than using the simple underline and underline is is one way of course of putting a line under some text but you don't have any control over the spacing of that it's simply in the color of the text there's no space between the bottom of the the characters and the and the line or at least you don't have any control over it the rules from InDesign will not explore the sport as borders so you can specify a rule in InDesign above or below which of course will print beautifully but that does not export then into the pub as a border ok swashes yes some fonts do support swatches this SAP Fino font is a sort of exaggerated example of that so as you can see with with alternate swatch is switched on in the lower example here we get some very sophisticated complexity here with the letters ed joining up with the with the end of the O it's again device-dependent that's not going to work on all devices but you're not going to be able to utilize that from any settings within InDesign so you will have to invoke that with your CSS headings are an important aspect because not only our headings going to divide your book possibly into into chunks or chapters or sections but also you're going to want to use those headings in your table of contents so you want your headings to start on a new page needless to say I'm not saying that you have to but you're quite likely to want to do that you might consider using whole page as I have in my in my book that you the book on ebook typography as you'll see in the next example you could possibly even decorate that page with an image and even use background images and here's the example from the book on ebook typography the introductory chapter so what I've done here is I I've created a background image and I have my a my heading sitting over the top of that and then a very small amount of text just an introduction to this to each chapter and then I move on to the next page okay so what happens with landscape and portrait snow now if we turn our book with an an iPad if we have an iPad if we're fortunate I don't know to own one of those wonderful devices you turn your your book round to horizontal format then you're going to see pages side by side and so we can view this text in either orientation so some devices will just give you a wide page in landscape view is possible post production from InDesign and exporting to ePub when you finally done all of your work and satisfied with with the the look of the text and so on then you can edit the metadata inside the e-book to lock the orientation now this is only at the moment supported on the iPad as far as I know I may be I may need to be corrected on that but we can for example target specific devices so say you might want your your book to look one way on the iPad and another way on the iPhone and so you can lock this this orientation so in landscape view we have this double page spread but you don't know what is the left or the right page so you're not able as a book designer to say this is going to be on the left this is going to be on the right what's going to happen is as soon as somebody increases or decreases the font size this is all going to shift around of course your first page or two will be a you know controllable to a certain extent you're certainly gonna start off on the left and then the next page will be on the right however and you can't say you're not creating a double page spread it at anytime you're just simply having one page side-by-side in which those pages are is not under your control as I said before you can orient it you can lock that orientation if you want columns is my next discussion point or there's not very much to say about this other than to say that when you're using InDesign of course you can use columns and of course you maybe once can convert content that is currently using columns in the print version and you can use columns in CSS it is a feature of the cascading style sheet language for HTML and web design but columns over over more than one page on an e-book is it's not really viewable not really workable so you can provide them but they will not work over more than one page the only time that you can really use columns is if you have a very short amount of text as an introductory at the top of the page so as long as it doesn't cross over to pages and then you can use columns as I have discussed I accidentally show you in this example of Robinson Crusoe which brings me to controlling the page the page itself of course it to a certain extent is rather an elusive concept in an e-book because as somebody increases the font size and then the text will flow on to another page however the one thing that you really wants to do and if you're working with InDesign is to make sure that you split the epub at the appropriate place so here we have under our InDesign paragraph style options export tagging and I'm switching on split document for the ePub at this heading so this heading will then make sure we make sure this it will always start at the top of the page you can always as well incorporate CSS control as examples as shown here you can for example say in the CSS so for example with a subheading you might want to also break the page at a point always start at that time so starting before always or as you can see there's also similar control for after a certain point just while we're on the subject of page breaking and we might talk about within the elements we might want to avoid breaking pages within certain elements if for example you've got an image with a caption you want to avoid that caption moving on to the next page leaving the image behind so you can set page break inside avoid CSS for that particular block but to be honest it's not rigidly applied of course that's why we have the word avoid in there it may be that the circumstances are such that the book cannot avoid but move the text on to the next page so you have to accept that sometimes the element and here's an example in my book I'm describing some code that we might want to use in the CSS and as you can see I get there's no way that I can prevent that from on to the next page or the the block of information and then what about the left or the right it is possible I mean there are documented rules within CSS that allow you to have page break after the right and even within the properties of the package metadata file we would be able to use something like page bread page spread right so things only move on to the right page in the in both of these examples but I'm afraid that's not really supported at the moment as far as I can tell and similarly widows and orphans are not really supported although you can use widows and orphans with in CSS as yet we're not really seeing a lot of support for that it is possible for us to put content at the end of each section you sometimes will see something like this where you have a little flourish at the end of a section at the bottom of this page here decorative items and we can add that with CSS it is possible for CSS to add content and here's an example of it so in this heading I've got a little character at the beginning of this text and at the end of the character at the end of the heading that's not actually in the HTML it's rather it's in the CSS so as you can see here I'm using h3 after an h3 before and then I'm providing that little Zapf dingbats character in there and that's then coming into the into the heading tables are a good idea where you're using data of some sort and here's an example here and so we can use small tables and we basically want to make sure that these are real this is real text and not images and in on the iPad if you have a table like this you can double tap on it and it will enlarge that up for easy easy viewing but it's also possible to add tables outside the content so you could create an HTML page with a table in that page and then have a hyperlink to it and that works very well on iOS devices iBooks works very well because we can then scroll through large amounts of content using that way we can add supplementary material we can have assigned some footnotes and so on but you know there are some problems with this because we have very limited space especially in some views landscape view for example on the iPad gives us very limited space and so sidebar content can be there but you don't really have access to the the margin as I've said before and also be aware that you don't have left and right again so you can't have say for example sidebar content moving over to the left in one case and over to the right on another case because we don't have the knowledge about which is the spine side at all so you should really use a side and here's an example here so I've got an aside element floating off to the left although as you can see we do have a limited amount of space so sometimes it doesn't really make a lot of sense to use that technique and the iPad also supports pop-up text so we can this is a feature of epub 3 which is a very useful going to be a very useful feature for having things like glossary items and so on but currently as far as I know again this is this presentation is bound to be dated soon you are going to only get support on the iPad for that we can also have other kinds of nonlinear resources so again this is supported on the iPad if we for example in the specifications for that particular item in our content we can have linear equals no which means that basically that content is not available to us as we page through the book but it can be available to us as we hyperlink to it this is of course quite difficult to demonstrate but I can guarantee you that I've got some examples of that in my book so footnotes and references of course footnotes don't really make any sense as we've said before we we are unable to control the page so therefore footnotes on not really of any sense at all but however you can put references at the end of the book or the end of the chapter and then link to those although ideally the pop-up text of course is the better solution only supported currently as I say on the iPad special effects it's worth having a look at a few things that we might want to add it's important to note that sometimes these things are not really features that may come from InDesign although again these things do change so it depends on the current version of InDesign that you're using as to whether these things are supported if you put a background or a shadow on a block in InDesign the question will be is that going to then appear in your eBook well the truth is that we can add these in any way later if we don't get that to be supported so CSS does support text shadow and block shadow as you can see here so we can we can do that whereas also we can use background now it's very important to note with a reef lovely book we cannot use a full-page background we although we can set a background on the body of an individual HTML page you're only going to be seeing that color in the central part of the page if we cannot get access to the margins so your your best approach really if you want to use background color is to do as I've done in this example here just in a block of text or in a background or something like that so here we have an example of of that as well on this page so background color in the heading but here on this page I'm talking about drop caps so drop caps is supported and then again this is something that you may find works well or not so well depending on your version of InDesign when you use drop caps in InDesign it will export to drop caps and then the and actually the later versions of InDesign work better than earlier versions here we have the an idea of differentiating the first paragraph where we want to use I'm using here small caps font in here and this is an important aspect of the relationship between InDesign and the e-book export because of course to do this in InDesign you might well select all of that text in the first line create a character style within that paragraph and then you have you you have that working for you however and there are other sophisticates fistic ated nested styles that we can utilize however when we export this to the ePub you're only going to find it's working on the certain number of words or characters in that line as it was presented to you in InDesign this of course is a fluid line because as somebody increases the font size and of course this is going to move into a different length of line so we need to then for edit the CSS to get this to work properly and as you can see here I'm using the the the command P first line which actually intelligently determines which is the first line in this paragraph and how how long it is even if the user has changed the font size and then finally we can use if you would like to use outlines on your headings you can do that as well you're not going to get that translating from InDesign however but you can use the CSS in in that edited epub and you will get those kinds of results here is an example of it and I just want to go if you go through a few further notes before I finished this presentation first of all fixed layout ebooks the typography and the styling and a fixed layout but it's not changeable by the user so the user cannot increase or decrease the font size but and the designers have much more control but just be aware every single page will need to become an HTML document in your fixed layout eBook and if you're using InDesign be aware that every release of InDesign seems to improve the epub export so if you're only using cs5 5.56 you may find that you're not getting the good a result if you've moved on to the latest Creative Cloud some habits that you're you you you are if you have some habits in InDesign need to go you cannot have I mean overriding text and fonts and and putting in extra spacing to to resolve orphans and widows and so forth you you really need to let go of those kinds of habits um we've in reef lovely books you need to make sure that everything is threaded together unless you want to move on to a different approach using articles or XML structure so the normal way is that everything is reflow ball unless you you you want to move on to other methods although I'm not I'm not covering that in this particular presentation with images you want to try to group those with captions of course but the images or images with captions need to be anchored at the right place in the text location so I suggest that you ex when you export you select relative to page or relative to text flow in the later versions and so that the image is not fixed however it will change its size depending on the window that it's being viewed on so devices smaller devices will then shrink that image down automatically and then we've already covered this a little bit but use your heading styles to split the epub and also explicitly give your all of your styles be they heading styles paragraph styles character styles or even object styles explicitly give them a tag and give them a class name don't leave it as automatic just take control of this yourself don't use style overrides avoid style overrides wherever possible and also show your hidden characters as you're working with InDesign so you can see where you've got tabs and empty spaces and empty paragraphs because you need to remove those or at least put it this way they will be ignored when you export to ePub so don't use those as methods of styling your table of contents is really important so you must also build that from your heading styles don't attempt to hand build your table of contents and also bear in mind that master page items are ignored leave them in no problem leaving them in have your page numbers if you like for your print version they simply are ignored when you export to to ePub if you plan to use the book idea and then have separate chapters in InDesign documents within a book panel that's also a good way of working but it's quite tricky to then further split the ePub in each of those separate chapters you would have to do post-production on that and then put your CSS in there too – to break the pages at those appropriate points and then when you export to ePub some things are going to be ignored – kerning tracking baseline shift balance ragged lines or a hyphenation control rotation you know although although I should say you can add those things in you can put those things in by editing the CSS and you will get those things to root or you can rotate your text you can I even have text on its side and so forth and then again more things to suggest here in the way that you work search and replace of course is your best friend not this is not the place to cover grep which is a way of pattern matching within your text you can either use an external editor to do this either this example here is using BB edit where I want to choose the the type that's be all the words have been typed in fully in capitals and I want to reduce those replace those I should say with title case this is the syntax that I'm using within BB edit on the other hand you can also do that within InDesign so thank you very much that's the end of this presentation thank you

No Comments

Leave a Comment

Your email address will not be published. Required fields are marked *