Skip to content

Instantly share code, notes, and snippets.

@jednano
Last active April 22, 2016 04:25
Show Gist options
  • Save jednano/de7be48049ad7985c80280265d2f7e46 to your computer and use it in GitHub Desktop.
Save jednano/de7be48049ad7985c80280265d2f7e46 to your computer and use it in GitHub Desktop.
Font Offset
$font-adjustments: (
arial-bold: (
ascender: 0.056,
cap: -0.130,
baseline: -0.154,
descender: 0.056
),
georgia-regular: (
ascender: 0.064,
cap: -0.157,
baseline: -0.149,
descender: 0.064
),
futura-light: (
ascender: -0.016,
cap: -0.202,
baseline: -0.130,
descender: 0.098
),
futura-book: (
ascender: 0.042,
cap: -0.172,
baseline: -0.160,
descender: 0.070
),
futura-bold: (
ascender: 0.052,
cap: -0.204,
baseline: -0.128,
descender: 0.100
),
source-sans-light: (
ascender: -0.038,
cap: -0.194,
baseline: -0.146,
descender: 0.082
),
source-sans-regular: (
ascender: -0.036,
cap: -0.198,
baseline: -0.146,
descender: 0.070
),
source-sans-semibold: (
ascender: -0.034,
cap: -0.200,
baseline: -0.146,
descender: 0.060
)
);
@mixin font($family, $size, $height: normal) {
@extend %#{$family};
font-size: $size;
@if type-of($height) == number and not unitless($height) {
line-height: ($height / $size);
} @else {
line-height: $height;
}
}
@function font-offset($font, $trim-to, $size, $line-height) {
$adjustment: map-get(map-get($font-adjustments, $font), $trim-to);
@if (unitless($line-height)) {
$line-height: $size * $line-height;
}
$neg-half-leading: ($line-height - $size) / -2;
@return $neg-half-leading + $size * $adjustment;
}
.foo {
$font-size: 14px;
$line-height: 22px;
@include font(source-sans-regular, $font-size, $line-height);
margin-top: font-offset(
$font: source-sans-regular,
$trim-to: cap,
$size: $font-size,
$line-height: $line-height
);
margin-bottom: font-offset(
$font: source-sans-regular,
$trim-to: baseline,
$size: $font-size,
$line-height: $line-height
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment