Text styling and font embedding - InDesign Tutorial

- Text Styling is one of the great strengths of InDesign. While HTML has made great strides in this area it still has a long way to go in relation to InDesign. Let's take a look at some of the available options when exporting text from InDesign to HTML. One of the first and best options is to embed fonts. That ensures that even if somebody doesn't have the font installs it renders correctly in the browser. One thing to watch out for when embedding fonts is that many fonts are not licensed to be embedded in HTML. This is a consequence of many of the licenses being written before it was even possible to embed fonts in HTML. So if you're gonna embed fonts just make sure that they're licensed properly. One great source of free fonts that you can embed anywhere is the Google fonts website. Now in addition to thinking about licensing you may also wanna pay attention to the file type of the font. Not all browsers support all font file types. I have found that OTF is a fairly universal font file type to use, but be sure to test any devices that you're targeting to make sure that they render properly. In addition to all browsers not supporting the same file types, two different browsers could support the same font file type, but still display text a little bit differently. So it's good if you start with the expectation that things won't look exactly the same in all browsers, and certainly won't look exactly the same as your InDesign layout if you want live text, and just do a fair amount of testing to make sure they look okay in every device you're targeting. Of all the ways to export that I've covered in this course the reflowable, and fixed layout EPUB, and exporting using in5, those three allow you to embed fonts when exporting. The default reflowable HTML export however, does not, it just doesn't have that option right now. so if you wanna embed fonts with reflowable HTML you could try exporting reflowable EPUB with the embed fonts option turned on and then crack open the EPUB file and take out the HTML and CSS content and just use it as plain HTML. Now another way to maintain the appearance of your InDesign text exactly is to render the text as images. Probably the best way to do this is in the Object Export Options in the EPUB and the HTML tab. Setting the Preserve Layout option to Rasterize Container. That will actually make the entire text frame render as an image. Now you could also go up to the Type menu and choose Create Outlines, that will convert the text in the text frame to vector outlines, and then when you export it it will be treated as such. The downside of that is that you no longer have editable text, but say you have an older version of InDesign where Rasterize Container just isn't available in the Object Export Options, then maybe Creating Outlines is a good way to go. Now if you're using in5 to export there is a global setting to render the text as images or scalable vector graphics. Now scalable vector graphics take care of one of the main concerns that people have when rendering text as images, which is that the text can get grainy and hard to read, especially when you're viewing it on say a retina display, or you have to zoom in on it. So scalable vector graphics help fix that, or when you're choosing to export your text as images you could set them to a higher PPI value, like 150 or 300. Now one more thing to note about rendering text as images, a lot of people also worry that this hurts Search Engine Optimization. Now while it's true on some level that it's better to have text in your document that is searchable, it's also true that Google doesn't pay a huge amount of attention to solely the amount of text you have in your document. If that were true then any spammer could just load up their website with a whole bunch of words and they would rush right to the top of the search rankings. Instead, Google bases its search rankings on reputation, so how many people are linking to your page? What keywords are they using when they're linking? And how many other people are linking to the people that are linking to you? So the best thing to do to get to the top of the search rankings is to make content that's of value to people and get them to link to you. Now back to the text options. The last sort of fail-safe is to use Web-Safe Fonts. These are the common fonts that are in all computers that we've all been used to for many years. Now because we're all used to them they don't look very fresh in a design, so I'd recommend you use these sparingly, but they can come in handy if you're trying to or you need to avoid embedding fonts, or you can't or don't want to render your text as images. Then Web-Safe Fonts can be a good way to make your HTML layout be a pretty good match to your InDesign layout. And lastly, if you're designing for specific devices, especially if you're creating an app, you could think about using the fonts that are used for the user interface of that device. So for example, for an Android you'd use the Droid font family or Roboto font family. If you're targeting iOS then you could use Helvetica, and actually iOS supports a huge number of fonts, so you can look that up at a site like iosfonts.com. And if you're targeting Windows Mobile then you'd use the Segoe family. Now that you're aware of the available options hopefully you have the tools to make decisions about how to best handle text styling in your projects. In the next video we'll take a look at color conversion.