{"id":16366,"date":"2018-10-30T13:56:12","date_gmt":"2018-10-30T13:56:12","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=16366"},"modified":"2020-09-03T16:05:30","modified_gmt":"2020-09-03T15:05:30","slug":"small-ships-sticky-typeface","status":"publish","type":"post","link":"https:\/\/www.shopjessicabuckley.com\/blog\/small-ships-sticky-typeface\/","title":{"rendered":"Small Ships: Sticky Typeface"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Welcome to Small Ships; where the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.shopjessicabuckley.com\">Marvel<\/a> dev team share a little of what they've been working on in the past month. Enjoy! <\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We've recently released a small change to the way a new text element's initial font is chosen in Marvel's design tool.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When you're designing a screen with a lot of text content, keeping fonts complementary and consistent is crucial for readability and aesthetics. It's a safe bet that if you've chosen a font in one text element, the next element you create is probably going to need the same font.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">That's why now, every new text element you create will automatically take on the font that you last picked for any other text element. Specifically, the typeface and the font weight will be remembered for the next element.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/20181030-sticky-typeface.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/20181030-sticky-typeface.gif\" alt=\"\" width=\"1108\" height=\"672\" class=\"alignnone size-full wp-image-16370\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For example, if you create an text block and switch it to use Knewave, the next element you make will have Knewave as the default. If you switch to Bree Serif and choose a bold weight, the next one will also be Bree Serif with the weight set to bold. And selecting a text element with a different font from the one you last chose won't replace this new default either. You have to explicitly choose it for the design tool to save it as your preference.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For anybody curious to learn how it works, I asked George Reith, one of the lead engineers at Marvel and the person who implemented the change.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\"Each time you edit the font family or weight of a piece of text it stores that new value in your browser. When you next insert a piece of text it checks there to see what you last used and uses that. These font settings will remain as long as you use the same browser or until you clear the browser's cache.\"<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Next up, we've been working hard on a quicker, more efficient way of navigating through and working with screens in our design tool. This has been the focus of a good chunk of the engineering team over the last month. We've been using it a lot internally and it's been evolving to a point where we're almost ready to share it. Watch this space! ????<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to Small Ships; where the Marvel dev team share a little of what they&#8217;ve been working on in the past month. Enjoy! We&#8217;ve recently released a small change to the way a new text element&#8217;s initial font is chosen in Marvel&#8217;s design tool. When you&#8217;re designing a screen with a lot of text content, keeping fonts complementary and consistent&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/small-ships-sticky-typeface\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":252,"featured_media":16116,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-16366","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"Find out what the Marvel dev team have been working on this month. We&#039;ve made some changes to our design tool - introducing the sticky typeface.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/small-ships-sticky-typeface\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sticky Typeface: Small Ships #2\" \/>\n<meta property=\"og:description\" content=\"Find out what the Marvel dev team have been working on this month. We&#039;ve made some changes to our design tool - introducing the sticky typeface.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.shopjessicabuckley.com\/blog\/small-ships-sticky-typeface\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-30T13:56:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-03T15:05:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2018\/09\/Group-2-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3200\" \/>\n\t<meta property=\"og:image:height\" content=\"1400\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"1 minute\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#website\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.shopjessicabuckley.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/small-ships-sticky-typeface\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2018\/09\/Group-2-1.png\",\"width\":\"3200\",\"height\":\"1400\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/small-ships-sticky-typeface\/#webpage\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/small-ships-sticky-typeface\/\",\"name\":\"Sticky Typeface: Small Ships #2\",\"isPartOf\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/small-ships-sticky-typeface\/#primaryimage\"},\"datePublished\":\"2018-10-30T13:56:12+00:00\",\"dateModified\":\"2020-09-03T15:05:30+00:00\",\"description\":\"Find out what the Marvel dev team have been working on this month. We've made some changes to our design tool - introducing the sticky typeface.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.shopjessicabuckley.com\/blog\/small-ships-sticky-typeface\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/small-ships-sticky-typeface\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/small-ships-sticky-typeface\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#\/schema\/person\/58bc08ac2e7d9398e8604ddf32490b77\"},\"headline\":\"Small Ships: Sticky Typeface\",\"datePublished\":\"2018-10-30T13:56:12+00:00\",\"dateModified\":\"2020-09-03T15:05:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/small-ships-sticky-typeface\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/small-ships-sticky-typeface\/#primaryimage\"},\"articleSection\":\"Small Ships\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.shopjessicabuckley.com\/blog\/small-ships-sticky-typeface\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#\/schema\/person\/58bc08ac2e7d9398e8604ddf32490b77\",\"name\":\"Dan Hough\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b8d1d6a83b2216113cdaaa4e27ca46ae874ff75f4407e9833d9c9f5d5c275b6e?s=96&d=mm&r=g\",\"caption\":\"Dan Hough\"},\"description\":\"Former developer, now Product Manager at Marvel. I turn user needs into dev work, and tweet nonsense and music frequently: @basicallydan\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/16366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/users\/252"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/comments?post=16366"}],"version-history":[{"count":0,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/16366\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media\/16116"}],"wp:attachment":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media?parent=16366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/categories?post=16366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/tags?post=16366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}