{"id":19,"date":"2021-03-17T14:33:41","date_gmt":"2021-03-17T14:33:41","guid":{"rendered":"http:\/\/brnding.strongestfamilies.com\/?page_id=19"},"modified":"2021-04-19T15:06:48","modified_gmt":"2021-04-19T15:06:48","slug":"typography","status":"publish","type":"page","link":"https:\/\/branding.strongestfamilies.com\/?page_id=19","title":{"rendered":"Typography"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Source Sans Pro<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Source Sans is a sans serif typeface that is crisp, modern and has distinctive features adding a touch of personality. Designed by Paul D. Hunt, for Adobe, Source Sans is an open-source font family. Balancing well between being modern and humanist\/classical, Source Sans has subtle geometric features and a large x-height, contrasting with traditional double story lower-case &#8216;a&#8217; and &#8216;g&#8217; letterforms. Source Sans was designed with user interfaces in mind.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The regular weight of Source Sans works well for body copy and extended passages of text. The light and heavy weights create expressive headlines that can be light and gentle or strong and authoritative, depending on the context.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/adobe-fonts\/source-sans\" data-type=\"URL\" data-id=\"https:\/\/github.com\/adobe-fonts\/source-sans\" target=\"_blank\">Source Sans<\/a> is free to own and use, and is available from multiple sources:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/adobe-fonts\/source-sans\" data-type=\"URL\" data-id=\"https:\/\/github.com\/adobe-fonts\/source-sans\" target=\"_blank\">GitHub<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/fonts.adobe.com\/fonts\/source-sans\" data-type=\"URL\" data-id=\"https:\/\/fonts.adobe.com\/fonts\/source-sans\" target=\"_blank\">Adobe Creative Cloud<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/fonts.google.com\/specimen\/Source+Sans+Pro\" data-type=\"URL\" data-id=\"https:\/\/fonts.google.com\/specimen\/Source+Sans+Pro\" target=\"_blank\">Google Fonts<\/a> <\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Font Size<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Set type large enough to facilitate reading, and set headlines large enough to create contrast and hierarchy.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Recommended Sizes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">For print purposes there are general guidelines for type size, however, depending on the application sizes may need to be adjusted. For example, a headline on a popup banner that measures six feet tall is much different than a headline for a brochure. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For web and screen use the rules are more concrete but again will have some subtle differences depending on screen sizes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Body Copy<\/h4>\n\n\n<div id=\"typography-block_605ce63d9e481\" class=\"type_sample text--large\">\n    <h3 class=\"type_sample__title\">Body Text Large<\/h3>\n    <div class=\"type_sample__content\">\n        <p>Suspendisse sed nunc erat. Nulla volutpat laoreet iaculis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque bibendum semper purus eget iaculis. Aliquam laoreet ligula odio, eget porta odio imperdiet vel.<\/p>\n    <\/div>\n    \t    <div class=\"type_sample__usage\">\n\t    \t<p>Use this typographic style for introductory paragraphs at the start of sections or as a way to bring emphasis to a body of text.<\/p>\n\t    <\/div>\n\t    <div class=\"type_sample__properties\">\n    \t<span><strong>Font Weight<\/strong>: Regular\/400<\/span>\n    \t<span><strong>Font Size<\/strong>: 22 px\/pt<\/span>\n    \t<span><strong>Line Height\/Leading<\/strong>: 30 px\/pt<\/span>\n    <\/div>\n<\/div>\n\n<div id=\"typography-block_605ce4929e480\" class=\"type_sample\">\n    <h3 class=\"type_sample__title\">Body Text<\/h3>\n    <div class=\"type_sample__content\">\n        <p>Vestibulum at eros sagittis dui placerat convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla placerat fermentum mauris, at convallis urna feugiat et. Aenean id justo purus. Vestibulum in mi consequat, scelerisque ex ac, sollicitudin velit. Cras faucibus varius velit quis commodo. Suspendisse potenti. Nam sed congue ligula. Morbi vitae erat id ligula dictum cursus. Ut finibus laoreet cursus. Fusce eros magna, sagittis eu est quis, auctor malesuada lacus.<\/p>\n<p>Nulla in dolor interdum, pharetra mauris vitae, pharetra risus. Quisque blandit risus nec dolor tempor molestie. Nam cursus velit volutpat enim eleifend pellentesque. Mauris in mauris luctus, gravida quam sed, lobortis quam. Donec hendrerit tortor vel diam tempor, ut bibendum nisl venenatis. Morbi enim metus, congue sit amet turpis ac, cursus pulvinar ligula. Vivamus in erat venenatis, mattis leo nec, dignissim ipsum. Nunc quis justo nulla.<\/p>\n    <\/div>\n        <div class=\"type_sample__properties\">\n    \t<span><strong>Font Weight<\/strong>: Regular\/400<\/span>\n    \t<span><strong>Font Size<\/strong>: 18 px\/pt or 16 px\/pt<\/span>\n    \t<span><strong>Line Height\/Leading<\/strong>: 24 px\/pt<\/span>\n    <\/div>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\">Headings<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Large headlines should be set in Source Sans Extra Light or Light. Using these lighter weights keeps the overall tone of the SFI brand soft and welcoming and not too bold and strong. In smaller uses, the heavier font weights are appropriate and can add texture to long passages of text and signal importance.<\/p>\n\n\n<div id=\"typography-block_605cdb710479f\" class=\"type_sample\">\n    <h3 class=\"type_sample__title\">Large Headings<\/h3>\n    <div class=\"type_sample__content\">\n        <h1>Heading Level 1<\/h1>\n    <\/div>\n    \t    <div class=\"type_sample__usage\">\n\t    \t<p><strong>For Web<\/strong>: There should only be one Heading 1 per page, and in most cases, this is handled automatically by the theme.<\/p>\n<p><strong>For Print<\/strong>: This typographic style is ideal for document titles, and could be used for additional section titles.<\/p>\n\t    <\/div>\n\t    <div class=\"type_sample__properties\">\n    \t<span><strong>Font Weight<\/strong>: Thin\/100<\/span>\n    \t<span><strong>Font Size<\/strong>: 91 px\/pt<\/span>\n    \t<span><strong>Line Height\/Leading<\/strong>: 96 px\/pt<\/span>\n    <\/div>\n<\/div>\n\n<div id=\"typography-block_605ce2259e47d\" class=\"type_sample\">\n    <h3 class=\"type_sample__title\">Sub Headings<\/h3>\n    <div class=\"type_sample__content\">\n        <h2>Heading Level 2<\/h2>\n    <\/div>\n    \t    <div class=\"type_sample__usage\">\n\t    \t<p>This typographic style is ideal for section titles within documents and on the web.<\/p>\n\t    <\/div>\n\t    <div class=\"type_sample__properties\">\n    \t<span><strong>Font Weight<\/strong>: Extra Light\/200<\/span>\n    \t<span><strong>Font Size<\/strong>: 58 px\/pt<\/span>\n    \t<span><strong>Line Height\/Leading<\/strong>: 60px\/pt<\/span>\n    <\/div>\n<\/div>\n\n<div id=\"typography-block_605ce26c9e47e\" class=\"type_sample\">\n    <h3 class=\"type_sample__title\">Sub Headings<\/h3>\n    <div class=\"type_sample__content\">\n        <h3>Heading Level 3<\/h3>\n    <\/div>\n    \t    <div class=\"type_sample__usage\">\n\t    \t<p>This typographic style can be used for sub-section headings.<\/p>\n\t    <\/div>\n\t    <div class=\"type_sample__properties\">\n    \t<span><strong>Font Weight<\/strong>: Light\/300<\/span>\n    \t<span><strong>Font Size<\/strong>: 40 px\/pt<\/span>\n    \t<span><strong>Line Height\/Leading<\/strong>: 48 px\/pt<\/span>\n    <\/div>\n<\/div>\n\n<div id=\"typography-block_605ce2a09e47f\" class=\"type_sample\">\n    <h3 class=\"type_sample__title\">Sub Headings<\/h3>\n    <div class=\"type_sample__content\">\n        <h4>Heading Level 4<\/h4>\n    <\/div>\n        <div class=\"type_sample__properties\">\n    \t<span><strong>Font Weight<\/strong>: Heavy\/700<\/span>\n    \t<span><strong>Font Size<\/strong>: 27 px\/pt<\/span>\n    \t<span><strong>Line Height\/Leading<\/strong>: 36 px\/pt<\/span>\n    <\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Source Sans Pro Source Sans is a sans serif typeface that is crisp, modern and has distinctive features adding a touch of personality. Designed by Paul D. Hunt, for Adobe, Source Sans is an open-source font family. Balancing well between being modern and humanist\/classical, Source Sans has subtle geometric features and a large x-height, contrasting [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":7,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-19","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/branding.strongestfamilies.com\/index.php?rest_route=\/wp\/v2\/pages\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/branding.strongestfamilies.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/branding.strongestfamilies.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/branding.strongestfamilies.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/branding.strongestfamilies.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=19"}],"version-history":[{"count":34,"href":"https:\/\/branding.strongestfamilies.com\/index.php?rest_route=\/wp\/v2\/pages\/19\/revisions"}],"predecessor-version":[{"id":336,"href":"https:\/\/branding.strongestfamilies.com\/index.php?rest_route=\/wp\/v2\/pages\/19\/revisions\/336"}],"wp:attachment":[{"href":"https:\/\/branding.strongestfamilies.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}