1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<title>Just My Type – H&FJ</title> 5<meta charset="utf-8"> 6<meta name="viewport" content="width=device-width, initial-width=1"> 7<link rel="stylesheet" href="s.css"> 8<link rel="stylesheet" type="text/css" href="//cloud.typography.com/7158232/613822/css/fonts.css" /> 9</head> 10<body> 11 <header class="site--header isle"> 12 <div class="wrap"> 13 <h1 class="site--title">Just My Type</h1> 14 <p>A collection of font pairings available from <a href="http://typography.com">H&FJ’s Cloud.Typography</a> service. Return to the <a href="/">home page</a> to see other pairings.</p> 15 </div> 16 </header> 17 <main class="site--content"> 18 <section class="set set--requiem-hoefler isle"> 19 <div class="wrap"> 20 <h2 class="alpha">Typography For The Masses</h2> 21 <p>Pairing typefaces is <em>hard</em>. That said, there are a few sure-fire ways to ensure than you get harmonic pairings that’ll suit your content well. My first step tends to be establishing a voice and tone; for instance, the tone of this particular pairing is intended to be formal and classic.</p> 22 <p>Once you know what voice you want your content to carry, you should go about finding a body font. In this case, Hoefler Text is a <strong>great</strong> choice for a body font that is formal and classic. A nice pairing for Hoefler Text is Requiem Display, sharing similarities with the body font of choice whilst bringing a lot of character to the table itself.</p> 23 <div class="set--info spit"> 24 <p class="standalone">Set in <a href="http://www.typography.com/fonts/requiem/overview/">Requiem</a> & <a href="http://www.typography.com/fonts/hoefler-text/overview/">Hoefler Text</a>.</p> 25 </div> 26 </div> 27 </section> 28 <section class="set set--gotham-whitney isle"> 29 <div class="wrap"> 30 <h2 class="alpha">Keeping Your Cool</h2> 31 <p>Of course, you don’t have to listen to me. You can explore the typographic options available to you, whether you pick a pairing with contrast, familiarity, extremity, or diversity. I’m just advising you with the techniques I myself have picked up from a fairly wide array of resources.</p> 32 <p>It should be said, however, that pretty much all the content on this page is merely here for decoration. It’s filler text, plain and simple. But <em>hopefully</em>, this filler text is at least a little more useful that good old Lorem Ipsum. This filler text should have <strong>takeaways</strong> – and I’m not talking about Chinese food.</p> 33 <div class="set--info spit"> 34 <p class="standalone">Set in <a href="http://www.typography.com/fonts/gotham/overview/">Gotham Condensed</a> & <a href="http://www.typography.com/fonts/whitney/overview/">Whitney</a>.</p> 35 </div> 36 </div> 37 </section> 38 <section class="set set--knockout-archer isle"> 39 <div class="wrap"> 40 <h2 class="alpha">Typographic Contrast</h2> 41 <p>Let’s jump back a second and get practical again. Let’s say we’re dead set on having a contrasted pairing for our content; great. But how do we do that? Do we just throw together a classic serif face with a big, bold headline? I don’t think so. That’s a recipe for typographic disaster.</p> 42 <p>When it comes to pairing typographic contrasts, it’s still a case of finding typefaces with <em>similar personalities.</em> Take this example you’re reading. Knockout and Archer are visually contrasting, but have <strong>
42similar character</strong>. They’re both friendly, quirky, and strong, like a great Disney Princess. (Is that metaphor too abstract?)</p> 43 <div class="set--info spit"> 44 <p class="standalone">Set in <a href="http://www.typography.com/fonts/knockout/overview/">Knockout</a> & <a href="http://www.typography.com/fonts/archer/overview/">Archer</a>.</p> 45 </div> 46 </div> 47 </section> 48 <section class="set set--chronicle-mercury isle"> 49 <div class="wrap"> 50 <h2 class="alpha">Do What You Want</h2> 51 <p>I can sit here and give you techniques for pairing typefaces for hours, but what it really comes down to is <strong>your gut</strong>. It’s an art, not a science. The most important thing to remember is to use <em>appropriate typefaces</em>. You wouldn’t set a legal document in Comic Sans. Or at least, I hope you wouldn’t.</p> 52 <p>Along with using appropriate typefaces, keep it simple. Avoid using ten typefaces when two will do the trick. Sometimes even one typeface is enough. Flick through some books for inspiration, or scrutinise the very websites and magazines whose design you look up to. Be honest.</p> 53 <div class="set--info spit"> 54 <p class="standalone">Set in <a href="http://www.typography.com/fonts/chronicle-display/overview/">Chronicle Display</a> & <a href="http://www.typography.com/fonts/mercury-text/overview/">Mercury</a>.</p> 55 </div> 56 </div> 57 </section> 58 </main> 59 <footer class="site--footer isle"> 60 <div class="wrap"> 61 <p class="footer--info standalone">A project created, maintained, and designed by <a href="http://daneden.me">Daniel Eden</a>. Many thanks to Adobe, <span class="caps">H&FJ</span>, and other contributors.</p> 62 </div> 63 </footer> 64
64<script>
vendor: 344 bytes, lines 64-70
64 65 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 66 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 67 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 68 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 69 70 ga('create', '
70UA-43231078-3
vendor: 50 bytes, lines 70-73
70', 'justmytype.co'); 71 ga('send', 'pageview'); 72 73
73</script>
73 74</body> 75</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.