{"id":97,"date":"2025-10-21T19:24:41","date_gmt":"2025-10-21T19:24:41","guid":{"rendered":"https:\/\/madebymolly.uk\/journal\/?p=97"},"modified":"2025-10-22T08:50:41","modified_gmt":"2025-10-22T08:50:41","slug":"3-typography-examples","status":"publish","type":"post","link":"https:\/\/madebymolly.uk\/journal\/3-typography-examples\/","title":{"rendered":"3 typography examples"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"513\" src=\"https:\/\/madebymolly.uk\/journal\/wp-content\/uploads\/2025\/10\/lucyandyak-1024x513.png\" alt=\"\" class=\"wp-image-110\" srcset=\"https:\/\/madebymolly.uk\/journal\/wp-content\/uploads\/2025\/10\/lucyandyak-1024x513.png 1024w, https:\/\/madebymolly.uk\/journal\/wp-content\/uploads\/2025\/10\/lucyandyak-300x150.png 300w, https:\/\/madebymolly.uk\/journal\/wp-content\/uploads\/2025\/10\/lucyandyak-768x385.png 768w, https:\/\/madebymolly.uk\/journal\/wp-content\/uploads\/2025\/10\/lucyandyak-1536x769.png 1536w, https:\/\/madebymolly.uk\/journal\/wp-content\/uploads\/2025\/10\/lucyandyak-2048x1026.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Lucy &amp; Yak<\/h4>\n\n\n\n<p><a href=\"https:\/\/lucyandyak.com\/\">Lucy &amp; Yak<\/a> is a whimsical, colorful, UK-based clothing brand. Their logo has always been a silly, curvy, youthful font, however, their website manages to strike a balance between their brand style and readability. They use bold sans-serif subheads and standard sans-serif paragraph text. I&#8217;ve always enjoyed exploring their website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"476\" src=\"https:\/\/madebymolly.uk\/journal\/wp-content\/uploads\/2025\/10\/thenudge-1024x476.png\" alt=\"\" class=\"wp-image-111\" srcset=\"https:\/\/madebymolly.uk\/journal\/wp-content\/uploads\/2025\/10\/thenudge-1024x476.png 1024w, https:\/\/madebymolly.uk\/journal\/wp-content\/uploads\/2025\/10\/thenudge-300x139.png 300w, https:\/\/madebymolly.uk\/journal\/wp-content\/uploads\/2025\/10\/thenudge-768x357.png 768w, https:\/\/madebymolly.uk\/journal\/wp-content\/uploads\/2025\/10\/thenudge-1536x714.png 1536w, https:\/\/madebymolly.uk\/journal\/wp-content\/uploads\/2025\/10\/thenudge-2048x952.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">The Nudge<\/h4>\n\n\n\n<p><a href=\"https:\/\/thenudge.com\/\">The Nudge<\/a> is a trendy events service that lets you know of major happenings in large cities. Their website is a blend between thin sans-serif subheads and newsy serif headlines. I like how the styles they select emulate a newspaper, while also being updated and readable.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"493\" src=\"https:\/\/madebymolly.uk\/journal\/wp-content\/uploads\/2025\/10\/teenageengineering-1024x493.png\" alt=\"\" class=\"wp-image-112\" srcset=\"https:\/\/madebymolly.uk\/journal\/wp-content\/uploads\/2025\/10\/teenageengineering-1024x493.png 1024w, https:\/\/madebymolly.uk\/journal\/wp-content\/uploads\/2025\/10\/teenageengineering-300x145.png 300w, https:\/\/madebymolly.uk\/journal\/wp-content\/uploads\/2025\/10\/teenageengineering-768x370.png 768w, https:\/\/madebymolly.uk\/journal\/wp-content\/uploads\/2025\/10\/teenageengineering-1536x740.png 1536w, https:\/\/madebymolly.uk\/journal\/wp-content\/uploads\/2025\/10\/teenageengineering-2048x987.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Teenage Engineering<\/h4>\n\n\n\n<p>Okay, this is my one pick that&#8217;s a little more &#8220;out there&#8221; &#8211; <a href=\"https:\/\/teenage.engineering\/\">Teenage Engineering <\/a>is an audio\/synthesizer brand that creates high quality luxury products to add to a bedroom music studio. Their brand is techy and also a bit silly. I&#8217;ve always liked shopping on their store because it really feels like you&#8217;re buying from a high-end company, with the large editorial images and thin font. Also, from a structure standpoint, I love how their header is structured like a dropdown menu without the actual dropdown mechanic. It feels bare-bones, like the user is in control to add the creativity layer, which is how their products feel when you use them.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h6 class=\"wp-block-heading\">resources i used this week<\/h6>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/practicaltypography.com\/\">Butterick&#8217;s Practical Typography<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Next-sibling_combinator\">next-sibling combinator | MDN<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2011\/03\/how-to-choose-a-typeface\/\">How to Choose a Font | Douglas Bonneville<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/fontsinuse.com\/\">Fonts In Use<\/a><\/li>\n<\/ul>\n\n\n\n<h6 class=\"wp-block-heading\">Key Rules\/Takeaways for Typography<\/h6>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A good starting place is to define font-family, font-size, line-height, text-align, font-weight, and font-style.<\/li>\n\n\n\n<li>You&#8217;ll want a minimum of four fonts in your font-family stack.<\/li>\n\n\n\n<li>Optimize font use and only load the fonts you&#8217;re using.<\/li>\n\n\n\n<li>You&#8217;ll generally want 2 typefaces for most formatting circumstances.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lucy &amp; Yak Lucy &amp; Yak is a whimsical, colorful, UK-based clothing brand. Their logo has always been a silly, curvy, youthful font, however, their website manages to strike a balance between their brand style and readability. They use bold sans-serif subheads and standard sans-serif paragraph text. I&#8217;ve always enjoyed exploring their website. The Nudge [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-97","post","type-post","status-publish","format-standard","hentry","category-assignments"],"_links":{"self":[{"href":"https:\/\/madebymolly.uk\/journal\/wp-json\/wp\/v2\/posts\/97","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/madebymolly.uk\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/madebymolly.uk\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/madebymolly.uk\/journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/madebymolly.uk\/journal\/wp-json\/wp\/v2\/comments?post=97"}],"version-history":[{"count":9,"href":"https:\/\/madebymolly.uk\/journal\/wp-json\/wp\/v2\/posts\/97\/revisions"}],"predecessor-version":[{"id":114,"href":"https:\/\/madebymolly.uk\/journal\/wp-json\/wp\/v2\/posts\/97\/revisions\/114"}],"wp:attachment":[{"href":"https:\/\/madebymolly.uk\/journal\/wp-json\/wp\/v2\/media?parent=97"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/madebymolly.uk\/journal\/wp-json\/wp\/v2\/categories?post=97"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/madebymolly.uk\/journal\/wp-json\/wp\/v2\/tags?post=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}