Effective Typography

typography.css

/*------------------------------------*/
/*------------------------------------*/
/*------Effective Typography----------*/
/*------------------------------------*/
/*------------------------------------*/

/** 
@authors: [info@mylaw.it, yudi@rahono.com]
**/

/** Begin Effective Typography **/

html {
  /** Base Font Size for rem or em **/
  /** ~ 16px **/
  font-size: 100%;
}

/*----- IF REM and VH ARE SUPPORTED ----*/
/*----- THIS ADAPTS ALL FONT SIZES -----*/
/* TO THE WINDOWS HEIGHT ON BIG SCREENS */

@media screen and (min-width: 1024px){
  html {
    /** base font size for larger screen if supported **/
    /** ~ 17px on 1024 screen. **/
    font-size: 2.15vh;
  }
}


html {
  text-overflow: ellipsis;
  line-height: 1.618em !important;
  word-spacing: 0.12ex;
  letter-spacing: 0.015em;
  word-break: normal;
  word-wrap: break-word;
  text-shadow: 0.05ex 0.05ex 0.05ex rgba(0,0,0,0.3);
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: greyscale !important;
  -moz-font-feature-settings:"onum" 1, "pnum" 1, "zero" 1, "nalt" 1, "kern" 1, "liga" 1, "dlig" 1, "hlig" 1, "clig" 1, "calt" 1 !important; 
  -moz-font-feature-settings:"onum=1, pnum=1, zero=1, nalt=1, kern=1, liga=1, dlig=1, hlig=1, clig=1, calt=1" !important; 
  -ms-font-feature-settings:"onum" 1, "pnum" 1, "zero" 1, "nalt" 1, "kern" 1, "liga" 1, "dlig" 1, "hlig" 1, "clig" 1, "calt" 1 !important; 
  -o-font-feature-settings:"onum" 1, "pnum" 1, "zero" 1, "nalt" 1, "kern" 1, "liga" 1, "dlig" 1, "hlig" 1, "clig" 1, "calt" 1 !important; 
  -webkit-font-feature-settings:"onum" 1, "pnum" 1, "zero" 1, "nalt" 1, "kern" 1, "liga" 1, "dlig" 1, "hlig" 1, "clig" 1, "calt" 1 !important; 
  font-feature-settings:"onum" 1, "pnum" 1, "zero" 1, "nalt" 1, "kern" 1, "liga" 1, "dlig" 1, "hlig" 1, "clig" 1, "calt" 1 !important;
}

p {
  /* make all paragraph 100% width to parent */
  max-width: 100%;
  /*if ex supported delete max width to make lines longer than 60 characters */
  max-width: 60ex;
}

/* GENERIC FONT SIZES */

h1 {
  font-size: 44.5px;
  font-size: 2.618rem;
}

h2 {
  font-size: 34px;
  font-size: 2rem;
}

h3 {
  font-size: 27.5px;
  font-size: 1.618rem;

}


h4 {
  font-size: 21px;
  font-size: 1.235rem;

}

h5 {
  /*h5 matches with p font-size*/
  font-size: 17px;
  font-size: 1rem;

}

h6 {
  font-size: 13px;
  font-size: 0.765rem;

}

/* GENERIC TEXT STYLES */

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

h1, h2{
  text-transform: capitalize;
}


h3 {
  text-transform: lowercase;
}

h4, h5, h6 {
  text-transform: uppercase;
  font-weight: 500;
}

h4 {
  font-style: italic;
}

h5 {
  font-weight: 900;
}

blockquote {
  font-style: italic;
}

/** End Effective Typography **/