Skip to content

Instantly share code, notes, and snippets.

@peteroupc
Last active December 26, 2015 08:19
Show Gist options
  • Save peteroupc/7121453 to your computer and use it in GitHub Desktop.
Save peteroupc/7121453 to your computer and use it in GitHub Desktop.
LESS functions for enabling beautiful typography in Web pages
/////////////////////////////////////////////////////////////
//
// LESS functions for enabling beautiful typography
// in Web pages. Written by Peter O., 2013-2015.
//
// Any copyright is dedicated to the Public Domain.
// http://creativecommons.org/publicdomain/zero/1.0/
//
// If you like this, you should donate to Peter O.
// at: http://upokecenter.dreamhosters.com/articles/donate-now-2/
//
// In most cases, use the functions ".monospacedtypography()"
// and ".traditionaltypography()", defined below. But there
// are also other useful functions given here.
//
/////////////////////////////////////////////////////////////
@monospaced_font: "Source Code Pro", "Menlo", "Consolas", "Inconsolata", "Liberation Mono", "Lucida Console",
"DejaVu Sans Mono", "Droid Mono",
"FreeMono", "Courier New", "Courier", monospace;
@serif_font: "Merriweather","Sitka Text", "PT Serif",
"Charis SIL Compact", "Charis SIL",
"Cambria",
"Palatino Linotype",
"Droid Serif",
"Liberation Serif", "Georgia", "Book Antiqua", "FreeSerif", "Times New Roman", serif;
@sans_serif_font: "Fira Sans", "Source Sans Pro", "Helvetica Neue",
"Open Sans", "FreeSans", "Clear Sans", "Calibri", "Liberation Sans",
"Segoe UI", "Roboto", "Meiryo UI", Verdana, "Droid Sans", "DejaVu Sans",
"Lucida Grande", "Lucida Sans Unicode", "Arial Unicode MS", Arial, sans-serif;
.fontFeatureSettings3(@v1, @v2, @v3){
font-feature-settings: @v1, @v2, @v3 !important;
-moz-font-feature-settings: @v1, @v2, @v3 !important;
-webkit-font-feature-settings: @v1, @v2, @v3 !important;
-ms-font-feature-settings: @v1, @v2, @v3 !important;
}
.fontFeatureSettings1(@v1){
font-feature-settings: @v1 !important;
-moz-font-feature-settings: @v1 !important;
-webkit-font-feature-settings: @v1 !important;
-ms-font-feature-settings: @v1 !important;
}
.fontFeatureSettings4(@v1, @v2, @v3, @v4){
font-feature-settings: @v1, @v2, @v3, @v4 !important;
-moz-font-feature-settings: @v1, @v2, @v3, @v4 !important;
-webkit-font-feature-settings: @v1, @v2, @v3, @v4 !important;
-ms-font-feature-settings: @v1, @v2, @v3, @v4 !important;
}
// Enables small caps
.smallcaps() {
font-variant: small-caps;
}
.typographybase(){
text-rendering: optimizeLegibility;
-webkit-text-rendering: optimizeLegibility;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
}
.hyphens(){
// Enable hyphenation where supported
word-wrap: break-word;
hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
}
.nohyphens(){
word-wrap: normal;
hyphens: none;
-moz-hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
}
.typography(){
.typographybase();
.hyphens();
.fontFeatureSettings4("onum" 1, "pnum" 1,"liga" 1, "kern" 1);
}
.typographytabfigures() {
.typographybase();
.hyphens();
.fontFeatureSettings4("onum" 0, "pnum" 0,"liga" 1, "kern" 1);
}
.fractions() {
.fontFeatureSettings1("frac" 1);
}
// Disables small caps
.nosmallcaps() {
font-variant: normal !important;
.fontFeatureSettings4("liga" 1, "kern" 1, "smcp" 0,"c2sc" 0);
}
.monospaced(){
font-family: @monospaced_font;
}
.sansserif(){
font-family: @sans_serif_font;
}
.serif(){
font-family: @serif_font;
}
.boldweight(){
font-weight: 700;
b, strong, th {
font-weight: 900;
}
dfn {
font-weight: 700;
}
}
.lightweight(){
font-weight: 200;
b, strong, th {
font-weight: 600;
b.strong, th { font-weight: 800; }
}
dfn {
font-weight: 200;
}
}
.regularweight(){
font-weight: 400;
b, strong, th {
.boldweight();
}
dfn {
font-weight: 400;
}
}
.italic(){
font-style: italic;
cite, i, em, dfn {
font-style: normal;
cite, i, em, dfn { font-style: italic; }
}
}
.roman(){
font-style: normal;
cite, i, em, dfn {
font-style: italic;
cite, i, em, dfn { font-style: normal; }
}
}
//
// Traditional font features for Web pages.
// Uses serif for body text, sans-serif for tables, headers,
// and other display text, and monospaced for code elements
// and some input elements.
//
// Example:
// .traditionaltypography(); // Use outside of any CSS rule
//
.traditionaltypography(){
body {
.serif();
.typography();
.regularweight();
}
cite, i, em, dfn { .italic(); }
h1, h2, h3, h4, h5, h6 { .boldweight(); }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea,
pre, textarea, tt, code, samp, var, kbd {
.monospaced();
* { .monospaced(); }
.typographybase();
}
pre {
.nohyphens();
}
span.fraction {
.fractions();
}
input, legend, option, button, select, h1, h2, h3, h4, h5, h6, figcaption, caption, aside, th, td {
.sansserif();
div, p, li, dt, dd, a, small, big {
.sansserif();
}
.typography();
}
th, td {
.typographytabfigures();
}
}
//
// Monospaced typography. Uses a monospaced
// font for all text.
//
// Example:
// .monospacedtypography(); // Use outside of any CSS rule
//
.monospacedtypography(){
body {
.typography();
.regularweight();
.monospaced();
}
cite, i, em, dfn { .italic(); }
h1, h2, h3, h4, h5, h6 { .boldweight(); }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea,
pre, textarea, tt, code, samp, var, kbd {
.monospaced();
.typographybase();
}
div, p, li, dt, dd, span, a, small, big {
.monospaced();
.typography();
}
pre {
.nohyphens();
}
span.fraction {
.fractions();
}
input, legend, option, button, select, h1, h2, h3, h4, h5, h6, figcaption, caption, aside {
.monospaced();
* { .monospaced(); }
.typography();
}
th, td {
.typographytabfigures();
}
}
////////////
// Font imports
@import url(https://fonts.googleapis.com/css?family=Merriweather:300,400,700,800,300italic,400italic,700italic,800italic);
@import url(https://fonts.googleapis.com/css?family=Fira+Sans:300,400,600,700,900,300italic,400italic,600italic,700italic,900italic);
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,600,700,900,300italic,400italic,600italic,700italic,900italic);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment