Matching Fallback Font Size

With a similar rule applied when the font is loading but not done yet, we can parry differences in font
metrics between the web font and the fallbacks . This is important because when the web font replaces the
fallback font, you want this change in size to be as discreet and unnoticeable as possible.
In our example, the Alegreya font has a noticeably smaller x-height than Helvetica and Arial (both of
which have similar metrics). By tweaking the font-size and line-height slightly, we can match the height
pretty closely. Similarly, we can adjust for differences in the character widths by tweaking word-spacing
slightly. This way, we end up with a result that much more closely resembles what the text will look like once
the web font has loaded.
.wf-alegreyasans-n4-loading p {
font-size: 0.905em;
word-spacing: -0.11em;
line-height: 1.72;
font-size-adjust:
}
■

Shayan sobhanian Creating Triangles in CSS

Bonus: Creating Triangles in CSS

In the comment bubble shown in Figure 6-1, the little triangle shape pointing to the previous paragraph is

in turn absolutely positioned relative to the comment bubble. It is created as a pseudo-element, and given

a triangular shape using an old clever trick with borders. (It goes back at least as far as 2001—see this page

from Tantek Çelik: http://tantek.com/CSS/Examples/polygons.html.) Figure 6-3 shows how it works.

.comment:after {

position: absolute;

content: '';

display: block;

width: 0;

height: 0;

border: .5em solid #dcf0ff;

border-bottom-color: transparent;

border-right-color: transparent;

position: absolute;

right: -1em;

top: .5em;

}

0 × 0 px element

Figure 6-3. Creating an arrowhead with a zero-size element and borders. As the right and bottom edges are

made transparent, a triangle shape is left

Figure 6-4. Positioning the triangle in relation to the contents of the comment

Here we are creating a 0 × 0–pixel block that has a .5 em border—but only the top and right border

edges have any color, so we end up with a triangle, since the border edges of the corners are rendered with a

slant. A handy way to generate triangles without images! We then position the triangle so it sticks out of the

top right of the comment box (see Figure 6-4).

 Shayan sobhanian