Fonts & Pairing

[codepen_embed height=”500″ theme_id=”0″ slug_hash=”WZYWJj” default_tab=”css,result” user=”ndangelo”]See the Pen <a href=’https://codepen.io/ndangelo/pen/WZYWJj/’>Fonts & Pairing</a> by Nicholas D’Angelo (<a href=’https://codepen.io/ndangelo’>@ndangelo</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

[codepen_embed height=”500″ theme_id=”0″ slug_hash=”kkGNEv” default_tab=”html,result” user=”jackharner”]See the Pen Google Fonts Pairing by Jack Harner (@jackharner) on CodePen.[/codepen_embed]

[codepen_embed height=”500″ theme_id=”0″ slug_hash=”LzqXEN” default_tab=”css,result” user=”ndangelo”]See the Pen <a href=’https://codepen.io/ndangelo/pen/LzqXEN/’>Typography of newyorker.com</a> by Nicholas D’Angelo (<a href=’https://codepen.io/ndangelo’>@ndangelo</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

[codepen_embed height=”500″ theme_id=”0″ slug_hash=”MEZPYX” default_tab=”html,result” user=”ndangelo”]See the Pen <a href=’https://codepen.io/ndangelo/pen/MEZPYX/’>Google Font Example</a> by Nicholas D’Angelo (<a href=’https://codepen.io/ndangelo’>@ndangelo</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”wrRYBJ” default_tab=”css,result” user=”ndangelo”]See the Pen <a href=’https://codepen.io/ndangelo/pen/wrRYBJ/’>CSS Text animation</a> by Nicholas D’Angelo (<a href=’https://codepen.io/ndangelo’>@ndangelo</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”LzMgYK” default_tab=”html,result” user=”ndangelo”]See the Pen <a href=’https://codepen.io/ndangelo/pen/LzMgYK/’>Pure CSS Text Preview (onClick show complete content)</a> by Nicholas D’Angelo (<a href=’https://codepen.io/ndangelo’>@ndangelo</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”GMPYgZ” default_tab=”css,result” user=”ndangelo”]See the Pen <a href=’https://codepen.io/ndangelo/pen/GMPYgZ/’>CSS text gradient color</a> by Nicholas D’Angelo (<a href=’https://codepen.io/ndangelo’>@ndangelo</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

The Beginner’s Guide to Font Pairing

The following are student examples of font pairing exercises:

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”wvvJjwE” default_tab=”html,result” user=”ndangelo”]See the Pen Understanding CSS Grid Systems by Nicholas D’Angelo (@ndangelo) on CodePen.[/codepen_embed]