Blueprint Fancy Type

Fancy Typography for your website.

This file can be imported using: @import "blueprint/fancy-type"

View the Source for this module on Github.

Imports

The following sass files are automatically imported when you import this file:

  1. Typography

Configurable Variables help

Value
"Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua", Georgia, serif

Mixins

View Source: Sass | SCSS

=fancy-type
  +fancy-paragraphs
  .caps
    +caps
  .dquo
    +dquo
  .alt
    +alt
@mixin fancy-type {
  @include fancy-paragraphs;
  .caps {
    @include caps; }
  .dquo {
    @include dquo; }
  .alt {
    @include alt; } }

To install the fancy type plugin:

  1. Import the fancy_type module: @import "blueprint/fancy_type"
  2. Mix in fancy-type to your project’s body or at the top level of your stylesheet:
    body { @include fancy-type; }
View Source: Sass | SCSS

=alt
  color: $alt-text-color
  font-family: $alternate-text-font
  font-style: italic
  font-weight: normal
@mixin alt {
  color: $alt-text-color;
  font-family: $alternate-text-font;
  font-style: italic;
  font-weight: normal; }

For great looking type, use this code instead of asdf: <span class="alt">asdf</span> Best used on prepositions and ampersands.

View Source: Sass | SCSS

=dquo($offset: 0.5em)
  margin-left: -$offset
@mixin dquo($offset: 0.5em) {
  margin-left: -$offset; }

For great looking quote marks in titles, replace “asdf” with: <span class="dquo">“</span>asdf” (That is, when the title starts with a quote mark). Note: you may have to change this value depending on your font size.

View Source: Sass | SCSS

=incr($font-size: 10px, $base-font-size: $blueprint-font-size, $old-line-height: $base-font-size * 1.5)
  font-size: 1em * $font-size / $base-font-size
  line-height: 1em * $old-line-height / $font-size * 4 / 5
  margin-bottom: 1.5em
@mixin incr($font-size: 10px, $base-font-size: $blueprint-font-size, $old-line-height: $base-font-size * 1.5) {
  font-size: 1em * $font-size / $base-font-size;
  line-height: 1em * $old-line-height / $font-size * 4 / 5;
  margin-bottom: 1.5em; }

Reduced size type with incremental leading

This could be used for side notes. For smaller type, you don’t necessarily want to follow the 1.5x vertical rhythm — the line-height is too much.

Using this mixin, reduces your font size and line-height so that for every four lines of normal sized type, there is five lines of the sidenote. eg:

Arguments: * $font-size – The desired font size in pixels. This will be converted to ems for you. Defaults to 10px. * $base-font-size – The base font size in pixels. Defaults to 12px * $old-line-height – The old line height. Defaults to 1.5 times the base-font-size

View Source: Sass | SCSS

=caps
  font-variant: small-caps
  letter-spacing: 1px
  text-transform: lowercase
  font-size: 1.2em
  line-height: 1%
  font-weight: bold
  padding: 0 2px
@mixin caps {
  font-variant: small-caps;
  letter-spacing: 1px;
  text-transform: lowercase;
  font-size: 1.2em;
  line-height: 1%;
  font-weight: bold;
  padding: 0 2px; }

Surround uppercase words and abbreviations with this class. Based on work by Jørgen Arnor Gårdsø Lom

View Source: Sass | SCSS

=fancy-paragraphs
  p + p
    +sibling-indentation
  p.incr,
  .incr p
    +incr
@mixin fancy-paragraphs {
  p + p {
    @include sibling-indentation; }
  p.incr,
  .incr p {
    @include incr; } }

This mixin is automatically included when you include fancy-type

View Source: Sass | SCSS

=sibling-indentation
  text-indent: 2em
  margin-top: -1.5em
  /* Don't want this in forms.
  form &
    text-indent: 0
@mixin sibling-indentation {
  text-indent: 2em;
  margin-top: -1.5em;
  /* Don't want this in forms. */
  form & {
    text-indent: 0; } }

Indentation instead of line shifts for sibling paragraphs. Mixin to a selector like p + p