36Using Predefined Fancy Fonts

Blueprint has a couple of text modifying features built in. These allow you to quickly and easily modify text using predefined classes.

If we go through them in the order they’re compiled to in the CSS, the first is the p + p element. The + symbol here is for styling something that follows something else—that is, the directions only apply to a paragraph that directly follows a paragraph. In this case, they indent the next paragraph rather than having a line space.

The incr class is used to space out lines as well as to make the font slightly smaller. We could use it if we wanted to make the text a bit smaller, for example, in a sidebar.

We can use the caps class as a kind of emphasizer, although it’s not too easy to read long stretches of text.

Finally, there’s the alt class, which makes your text italic and therefore look more handwritten. This is the fanciest one of all.

What To Do...
  • Add the mixin into your style sheet.
    blueprint/fancytype.scss
     
    @import​ ​"blueprint/fancy-type"​;
     
    body​ {
     
    @include​ fancy-type; }

    This compiles to:

     
    @charset​ ​"utf-8"​;
     
    body​ ​p​ + ​p​ {
     
    text-indent: 2em;
     
    margin-top: -1.5em; }
     
    form​ ​body​ ​p​ + ​p​ {
     
    text-indent: 0; }
     
    body​ ​p​.incr,
     
    body​ .incr ​p​ {
     
    font-size: 0.833em;
     
    line-height: 1.44em;
     
    margin-bottom: 1.5em; }
     
    body​ .caps {
     
    font-variant: small-caps;
     
    letter-spacing: 1px;
     
    text-transform: lowercase;
     
    font-size: 1.2em;
     
    line-height: 1%;
     
    font-weight: bold;
     
    padding: 0 2px; }
     
    body​ .dquo {
     
    margin-left: -0.5em; }
     
    body​ .alt {
     
    color: #666666;
     
    font-family: ​"Warnock Pro"​, ​"Goudy Old Style"​, ​"Palatino"​...
     
    font-style: italic;
     
    font-weight: normal; }
  • See how some of the classes look in your browser.
    images/blueprint/fancytype.png
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset