Nautical Poseidon Mythology

    eyeglass-font-stacks

    0.1.8 • Public • Published

    Font Stacks

    Font Stacks is a Sass and Compass font-family library of common web-friendly font stacks.

    Forked from https://github.com/adamstac/font-stacks

    Installation

    1. gem install font-stacks
    2. Add require 'font-stacks' in Compass's config.rb file
    3. Then @import font-stacks

    Usage

    The usage is simple. Here are two examples:

    Function Based Usage

    // Long-form
    .foo {
      font-family: font-family("Helvetica Neue");
    }
    
    // Shorthand
    .foo {
      font-family: ff("Helvetica Neue");
    }
    
    // Resulting CSS
    .foo {
      font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
    }
    

    Mixin Based Usage

    // Long-form
    .foo {
      @include font-family("Helvetica Neue");
    }
    
    // Shorthand
    .foo {
      @include ff("Helvetica Neue");
    }
    
    // Resulting CSS
    .foo {
      font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
    }
    

    As you can see, you simply pass the name of the font-stack to the font-family() function or its shorthand counterpart ff(), or to the font-family() mixin or its shorthand counterpart ff(). Simple.

    Default Variables

    If you'd like to set the default font-family, override the monospace font-family or set the default sans-serif or serif fonts, I have provided a few variables you can set.

    Default Sans-serif

    By default, $default-sans-serif is set to "Helvetica".

    $default-sans-serif: "Helvetica"
    

    You can set this variable to another available font, such as "Verdana". Here's an example:

    $default-sans-serif: "Verdana"
    

    Then you can simply pass "sans-serif" to the font-family() function or mixin to use your default sans-serif font stack.

    .foo {
      +font-family(sans-serif)
    }
    

    Default Serif

    By default, $default-serif is set to "Georgia".

    $default-serif: "Georgia"
    

    You can set this variable to another available font, such as "Times". Here's an example:

    $default-serif: "Times"
    

    Then you can simply pass "serif" to the font-family() function or mixin to use your default serif font stack.

    .foo {
      +font-family(serif)
    }
    

    Default Monospace

    The monospace font stack hasn't gotten as much thought or love yet, but by default, the monospace font stack is set to:

    "DejaVu Sans Mono", Menlo, Monaco, Consolas, Courier, monospace
    

    If you'd like to override this, set $default-monospace to the stack you'd prefer. For example:

    $default-monospace: "Anonymous Pro", Menlo, Monaco, Consolas, Courier, monospace
    

    You continue to pass "monospace" to the font-family() function or mixin to use your default monospace font stack.

    .foo {
      +font-family(monospace)
    }
    

    Default font-family

    By default $default-font-family is set to $default-sans-serif. This needs to have a value to always return a font stack, even if you mis-spell or something isn't right. I'd rather return your default instead of nothing.

    $default-font-family: $default-sans-serif
    

    Font Stacks

    Serif

    Baskerville, (88.60% on Mac, 49.10% on Windows)

    Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif
    

    Big Caslon, (85.10% on Mac)

    "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif
    

    Bodoni MT, (47.89% on Windows)

    "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif
    

    Book Antiqua, (86.09% on Mac)

    "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif
    

    Cambria, (54.51% on Windows)

    Cambria, Georgia, serif
    

    Constantia, (53.81% on Windows)

    Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif
    

    Didot, (87.72% on Mac)

    Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif
    

    Garamond, (23.84% on Mac, 86.24% on Windows)

    Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif
    

    Goudy Old Style, (51.30% on Windows)

    "Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif
    

    Hoefler Text, (88.70% on Mac, 1.16% on Windows)

    "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif
    

    Lucida Bright, (64.90% on Mac, 33.84% on Windows, huge x-height)

    "Lucida Bright", Georgia, serif
    

    Palatino, (79.71% on Mac, 98.04% on Windows)

    Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif
    

    Times New Roman ~ Times, (100% on Mac, 100% on Windows)

    "Times New Roman", Times, serif
    

    Sans-serif

    Calibri, (54.76% on Windows)

    Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif
    

    Candara, (54.31% on Windows)

    Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif
    

    Franklin Gothic Medium, (97.89% on Windows)

    "Franklin Gothic Medium", Arial, sans-serif
    

    Futura, (91.01% on Mac)

    Futura, "Trebuchet MS", Arial, sans-serif
    

    Geneva, (98.84% on Mac)

    Geneva, Tahoma, Verdana, sans-serif
    

    Gill Sans, (91.52% on Mac, 51.74% on Windows)

    "Gill Sans", "Gill Sans MT", Calibri, sans-serif
    

    Helvetica Neue ~ Helvetica, (94.74% on Mac)

    "Helvetica Neue", Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif
    

    Lucida Grande, (99.13% on Mac, 98.25% on Windows)

    "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif
    

    Optima, (90.14% on Mac)

    Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif
    

    Segoe, (45.04% on Windows)

    Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif
    

    Tahoma, (99.30% on Windows)

    Tahoma, Geneva, Verdana, sans-serif
    

    Trebuchet MS, (94.20% on Mac, 99% on Windows)

    "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif
    

    Verdana, (96.81% on Mac, 99.40% on Windows)

    Verdana, Geneva, sans-serif
    

    Monospace

    Default Monospace font stack. Override by setting $default-monospace.

    "DejaVu Sans Mono", Menlo, Monaco, Consolas, Courier, monospace
    

    Credits and special thanks

    Special thanks to Amrinder Sandhu for his research on web font stacks and article Revised Font Stacks. The refactor from this version as well as the additional support of the various web fonts is largely based on, and because of, his work.

    Additional special thanks to my bud Nathan Smith for being an awesome sounding board and for helping me make some decisions that made this project all the more better. Thanks bro!

    License

    Copyright (c) 2011 Adam Stacoviak

    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

    Install

    npm i eyeglass-font-stacks

    DownloadsWeekly Downloads

    5

    Version

    0.1.8

    License

    MIT

    Last publish

    Collaborators

    • strarsis