Mastering Web Fonts and Multicolumn Layouts in HTML5/CSS3

1. Neal Stublen nstublen@jccc.edu HTML5 and CSS3

2. Chapter 9Embedded Fonts and Multicolumn Layouts

3. Web Fonts

4. Font Limitations • Browsers can only display the fonts installed on the device • Arial, Verdana, Times, Georgia • Custom fonts usually meant using images

5. Now: @font-face • Instructs the browser to download a font and make it available @font-face { font-family: ‘fontName’; src: url(…); font-weight: weight; font-style: style; }

6. Font Sources • Specify one or more font sources • Similar to specifying media sources • Let the browser choose the supported format src: url(…) format(‘eot’), url(…) format(‘woff’), url(…) format(‘trutype’)

7. Font Types • EOT – proprietary font format for IE4-8 • WOFF – Web Open Font Format • OTF – OpenType • TTF – TrueType • SVG – Scalable Vector Graphics (original iPhone) • Compatibility – Table 9.1, caniuse.com

8. EOT Support • IE browsers before IE9 need to be tricked into using a font src: url(‘font.eot?#iefix’), … • But with IE9+: src: url(‘font.eot’); src: url(‘font.eot?#iefix’), … See http://www.fontspring.com/blog/fixing-ie9-font-face-problems

9. Font Property Descriptors • @font-face properties, such as font-weight, don’t control the font – they describe the font @font-face { font-family: ‘MyFont’; font-style: normal } @font-face { font-family: ‘MyFont’; font-style: italic }

10. Unicode Range • Specifies the characters included in the font • May be necessary for specialized fonts or with some languages

11. Applying the Font • Refer to the font as any other font h1 { font-family: MyFont, sans-serif; } • Fallback fonts may be a good idea

12. Adding a Font • Let’s add fonts to the HTML Herald page • Add fonts to @font-face

13. Fonts That Won’t Load • Some browsers (meaning IE) won’t load online fonts for an offline web page • Fonts from other sources, such as Google Fonts, may need to be copied

14. Legal Considerations • You can’t legally copy any font from your computer and use it on the web • Make sure you are licensed to use your font online • Many online resources for web fonts

15. Font Squirrel • If you need to create multiple font files, Font Squirrel can help • Upload a single font format, download multiple font formats

16. Exercise Caution • Downloading fonts can use a lot of bandwidth • Do I need a custom font on mobile devices? • Only include fonts you use • Consider images for rare font use • Can the font size be reduced to only include the characters you need? • Only uppercase, etc.

17. Multicolumn Layouts

18. Mimic Newsletter Formats • CSS3 can wrap text into multiple columns column-count column-gap column-width • No columns if not supported

19. Columns and Height • How do columns wrap if the containing element has a specified height? • Columns are only created when needed • Text overflows out of the last column (use overlow: hidden to hide overflow content) • Use column-fill: balance to evenly spread content across all columns

20. Column Rules and Breaks • Use column-rule to display a line between columns • Use break-before, break-after, break-inside to prevent column breaks h2 { break-after: avoid } • Use column-span to force an element to span multiple columns

21. Media Queries

22. What are media queries? • Conditional CSS that depends on device attributes • Screen vs. print • Display width • Pixel ratio (iOS) • Seen in the <link rel=“stylesheet”> as media=“print”

23. Target Device Size • Prevent sidebar display if the maximum width of the device is 600px or less @media (max-width: 600px) { .sidebar { display: none; } }

24. Target Device Orientation • Prevent sidebar display if the device is in portrait mode @media (orientation: portrait) { .sidebar { display: none; } }

25. Possible Queries • color (bits per pixel for colors) • aspect-ratio, device-aspect-ratio • device-height, device-width • height, width • orientation • resolution • Upcoming queries: • http://dev.w3.org/csswg/mediaqueries4/