10.1. Enlarging Text Excessively
Problem
You want to draw attention to a web page by enlarging some of the text as shown in Figure 10-1.
Figure 10-1. An example of excess type size
Solution
Increase the size of the heading so that it is out of proportion with the rest of the text. First use this HTML:
<h1>Hi.</h1>
Then use this CSS code:
h1 { font-size: 17em; margin: 0; padding: 0; text-align: center; font-family: Arial, Verdana, Helvetica, sans-serif; }
Discussion
Obviously, any element that’s larger than the other elements in the same environment stands out. So, when you want to call attention to an area of a web page, try using an excessive type size.
In this example, the size of the font in the word
“Hi.” has been set to
17em
. In the font-size
property,
an em unit is equal to whatever the font-size of the container is.
So, 17em units is equal to 17 times the default font size. There is
no theoretical limit to how large you can size text, but in practice
different browsers do max out at some point. Not everyone will have a
monitor that’s large enough to see type that is 1
mile (or 63,360 inches) tall:
h3 { font-size: 63360in; }
See Also
Recipe 1-2 for specifying font measurements and sizes; “The Elements of Text and Message Design and Their Impact on Message Legibility: A Literature Review,” from the Journal of Design Communication at http://scholar.lib.vt.edu/ejournals/JDC/Spring-2002/bix.html ...
Get CSS Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.