Subtitles of the Movie

Text isn't easy to read on computer screen so to compensate for this you'll want to use CSS to take control over your web typography, thereby improving the legibility of your type. Let me now give you some tips and techniques for making your HTML text easier to read. Now, all browsers left justify text for a good reason. Text lined up evenly on a page is much easier to read. I rarely recommend changing from this default and perhaps only for formatting page headlines and large section labels. However, a formatting device that you may be familiar with from the print world to add some contrast to all this left-justified text and to improve the look of some of your page layouts is that of indenting the first line of a paragraph. These indents, as you can clearly see in this example where I've indented every other paragraph, will act as a hook for the reader, drawing the eye to the beginning of each paragraph. These are especially useful where line height is quite narrow. CSS gives us the text indent property for this. Here in this example I've set up a class, an indent class and the only property in that class is to indent 30 pixels. The syntax is text -indent and then you can apply a value; pixels or ems or even percentages. So here you're seeing the result of a 30-pixel indent. Another tip for improving the readability of your text is to use bitmap type. Type integrated graphics programs like Photoshop will be bitmapped so it will be the same size and exactly the same typeface on all browsers. Use bitmap type whenever precise typographic control of non-browser safe typefaces is needed. Also, increase white space. It's easier to read text that is surrounded by empty space. This empty space is referred to as white space. If you visit my web design manual and designindex.htm you'll notice that I have a lot of white space. I employ the white space by adding headers, titles, bullet lists, pull quotes, very short paragraphs and narrow columns. All of this will improve the white space and increase readability and legibility of your websites. Another tip is to use larger font sizes. Larger type is always easier to read. Titles and headers should be a minimum of 16 pixels or 16 points. Font sizes of body text should be close to 12 or 14 points. I believe this is 14 or maybe even 16 points for my body text here on this website. My headers are even bigger. The best way to check for legibility is to field test your type in a variety of browsers and platforms. Now, fonts are generally grouped into two families; serif and sans serif. A serif is the flag or foot at the end of a letter stroke. Fonts either have this serif or they don't. Of the standard system-supplied fonts, Times, New York and Century are examples of serif fonts. Helvetica, Arial and Geneva are examples of sans serif fonts. Generally sans serif fonts are easier to read on computer monitors and should always be used for body text, especially for body text below about 12 points. Serif fonts are best used as bold titles and headlines where they add personality and style but are still very easy to read. In this page here I've used serif fonts but only because my body text here is quite large; about 16 point. But notice that I'm using sans serif for my headings and my page titles. The next tip is to always format your text in narrow columns and I've done that everywhere here on this design site. Everything's in a narrow column. Studies have shown that text is easier to read when it's formatted into narrow columns. A general rule of thumb is to keep your paragraph short and no wider than 40 to 60 characters. This translates to between eight and twelve words per line. Wider columns require more line spacing, also called letting, to maintain its readability. Text in narrow columns also reduces eye fatigue and increases white space, giving you two additional bonuses. In addition to making the text look better, it also increases white space, reducing problems reading it. Now, if you do want to go with wider columns of text, be sure to increase the letting. For maximum legibility, the letting or the line spacing should be between 125 and 150 percent of body type size. For 12-point text, letting should be 14 to 15 points. And you'll notice that my headlines here I've used even more letting. So as a general rule, your headlines will have even more spacing between the header and the body text. And lastly, don't forget headlines and side heads. Headlines are very common and also very useful. Headlines are used throughout this design manual and there are really fewer reasons not to include these. Headlines help your users figure out what the section of the content is about. Also helps search engines determine what your content, your page content is all about. Side heads are the ones that stick out on the sides. These can be useful instead of headlines where you want to increase white space on your pages. That then will include this very important section of the tutorial on using CSS to format your text. You've learned in this section why text formatting is important, how to change browser-safe fonts, how to style font sizes, how to apply styles to text, how to set line height, letter spacing and other font properties, including font weight, font style, font variant and others. In this last movie you received some tips and techniques for improving the text legibility of your HTML-based text.