{"id":1712,"date":"2023-02-20T01:16:48","date_gmt":"2023-02-20T06:16:48","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/?p=1712"},"modified":"2023-02-20T17:25:34","modified_gmt":"2023-02-20T22:25:34","slug":"typographic-hierarchy","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/topics\/css\/typographic-hierarchy\/","title":{"rendered":"Typographic Hierarchy"},"content":{"rendered":"\n<p>Most of the web is text so much of what you have to design is text.&nbsp;A typographic hierarchy helps the user to quickly scan a page and find information.&nbsp;Also,&nbsp;done right,&nbsp;it will make the page more visually attractive.<\/p>\n\n\n\n<p>Typographic Hierarchy tells the reader two basic things: <\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>what text is more or less important, <\/li><li>what kinds of text are on the page (titles, dates, links etc).<\/li><\/ol>\n\n\n\n<p>Altogether, this information greatly helps people to quickly scan the page, understand what it&#8217;s about and find what they&#8217;re looking for quickly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Rules to Keep in Mind<\/strong><\/h3>\n\n\n\n<p>Once you have a basic understanding of hierarchy keep a couple of things in mind:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Know the <strong>Content<\/strong>. You can&#8217;t create a hierarchy for content you don&#8217;t understand.<\/li><li>Make sure the most <strong>important items stand out<\/strong> from the rest.<\/li><li>Each&nbsp;<strong>different kind&nbsp;<\/strong>of content needs a&nbsp;<strong>different&nbsp;type&nbsp;treatmen<\/strong>t (color, font, size etc).<\/li><li>The<strong>&nbsp;same kinds<\/strong>&nbsp;of content should get the&nbsp;<strong>same&nbsp;type&nbsp;treatment.<\/strong><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Things you can style to show hierarchy<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Size<\/strong>: the bigger the text the more important it appears. <ul><li>[CSS Property Example] <code>font-size: 2rem;<\/code><\/li><li>Using rems allows you to make the sizes relative and consistent to the base font for the page<\/li><\/ul><\/li><li><strong>Color<\/strong>: different color makes items stand out or fade. Remember to keep contrast between text color and background color. <ul><li>[CSS Property Example] <code>color: #888888;<\/code><\/li><li>This controls the text color of elements with text.<\/li><li>[CSS Property Example] <code>background-color: #000000;<\/code><\/li><\/ul><\/li><li><strong>Weight<\/strong>: The boldness of the text. You can only use 100,200,300,400,500,600,700,800 or 900. 100 is the lightest, 900 is the boldest. Default text weight is 400, default bold weight is 700. <ul><li>[CSS Property Example] <code>font-weight: 900;<\/code><\/li><li>By default in browsers text inside of &lt;b&gt; and &lt;strong&gt; elements is given a bold weight. Also many browser give bold weight to heading &lt;h1&gt;-&lt;h6&gt; elements.<\/li><\/ul><\/li><li><strong>Text Style<\/strong>: Here you add special styling like alignment, <em>italics<\/em>, and UPPERCASE. <ul><li>[CSS Property Example] <code>text-align: right;<\/code><\/li><li>[CSS Property Example] <code>text-transform: uppercase;<\/code><\/li><li>[CSS Property Example] <code>letter-spacing: .2rem;<\/code><\/li><li>[CSS Property Example] <code>font-style: italic;<\/code><\/li><\/ul><\/li><li><strong>Font<\/strong>: Changing the font itself is another way to differentiate text. <ul><li>[CSS Property Example] <code>font-family: Lato, Helvetica, Arial, sans-serif;<\/code><\/li><li>Remember to end the font-family stack with the appropriate one of these five generics: 1)serif, 2)sans-serif, 3)monospace, 4)cursive, 5)fantasy.<\/li><\/ul><\/li><li><strong>Distance\/Spacing<\/strong>: elements that are part of a group should be closer to each other. Groups should have space betwen them. <ul><li>[CSS Property Example] <code>line-height: 1.5;<\/code><ul><li>This controls the distance between lines in an element (like paragraph).<\/li><\/ul><\/li><li> [CSS Property Example] <code>margin-bottom: 2rem;<\/code><ul><li>This controls the distance between elements <\/li><\/ul><\/li><\/ul><\/li><li><strong>Repetition<\/strong>: style the same type of text in the same way. <ul><li>[CSS Property Example] <code>h2.article-title{font-size: 2rem;}<\/code><br><br><\/li><\/ul><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"anonymous_element_22\">Articles<\/h3>\n\n\n\n<p><strong>Overall Typographic Hierarchy on the Web<\/strong><\/p>\n\n\n\n<p><a href=\"https:\/\/webdesign.tutsplus.com\/articles\/understanding-typographic-hierarchy--webdesign-11636\">https:\/\/webdesign.tutsplus.com\/articles\/understanding-typographic-hierarchy&#8211;webdesign-11636<\/a><\/p>\n\n\n\n<p>This article does a good job of explaining typographic hierarchy. It&#8217;s part of a larger series on web typography so read more if you like.<br><\/p>\n\n\n\n<p><strong>General Type Hierarchy Article<\/strong><br><\/p>\n\n\n\n<p><a href=\"http:\/\/thinkingwithtype.com\/text\/#heirarchy\">http:\/\/thinkingwithtype.com\/text\/#heirarchy<\/a><\/p>\n\n\n\n<p>This one isn&#8217;t as focused on the web but it has some great explanations and examples. See the Crime Blotter project examples at the end for how different the same piece of text can look based on different type treatments. Also, this is a great web site in general for learning about type in more detail.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"anonymous_element_24\">Brief Video Explanation.<\/h4>\n\n\n\n<p>This is not as complete as the above article. It&#8217;s a quick intro at just under 3 minutes.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Typographic Hierarchy: Explained\" width=\"750\" height=\"422\" src=\"https:\/\/www.youtube.com\/embed\/qCVvnCjTv5I?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Most of the web is text so much of what you have to design is text.&nbsp;A typographic hierarchy helps the user to quickly scan a page and find information.&nbsp;Also,&nbsp;done right,&nbsp;it will make the page more visually attractive. Typographic Hierarchy tells the reader two basic things: what text is more or less important, what kinds of&hellip; <a class=\"more-link\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/topics\/css\/typographic-hierarchy\/\">Continue reading <span class=\"screen-reader-text\">Typographic Hierarchy<\/span><\/a><\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"categories":[19,24],"tags":[134],"coauthors":[87],"class_list":["post-1712","post","type-post","status-publish","format-standard","hentry","category-css","category-typography","tag-typographic-hierarchy","entry"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","gform-image-choice-sm":"","gform-image-choice-md":"","gform-image-choice-lg":""},"post_excerpt_stackable_v2":"<p>Most of the web is text so much of what you have to design is text.&nbsp;A typographic hierarchy helps the user to quickly scan a page and find information.&nbsp;Also,&nbsp;done right,&nbsp;it will make the page more visually attractive. Typographic Hierarchy tells the reader two basic things: what text is more or less important, what kinds of text are on the page (titles, dates, links etc). Altogether, this information greatly helps people to quickly scan the page, understand what it&#8217;s about and find what they&#8217;re looking for quickly. Rules to Keep in Mind Once you have a basic understanding of hierarchy keep&hellip;<\/p>\n","category_list_v2":"<a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/category\/topics\/css\/\" rel=\"category tag\">CSS<\/a>, <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/category\/topics\/design\/typography\/\" rel=\"category tag\">Typography<\/a>","author_info_v2":{"name":"Christopher Stein","url":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/author\/cstein\/"},"comments_num_v2":"1 comment","uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"post-thumbnail":false,"gform-image-choice-sm":false,"gform-image-choice-md":false,"gform-image-choice-lg":false},"uagb_author_info":{"display_name":"Christopher Stein","author_link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/author\/cstein\/"},"uagb_comment_info":1,"uagb_excerpt":"Most of the web is text so much of what you have to design is text.&nbsp;A typographic hierarchy helps the user to quickly scan a page and find information.&nbsp;Also,&nbsp;done right,&nbsp;it will make the page more visually attractive. Typographic Hierarchy tells the reader two basic things: what text is more or less important, what kinds of&hellip;&hellip;","_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/posts\/1712","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/comments?post=1712"}],"version-history":[{"count":1,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/posts\/1712\/revisions"}],"predecessor-version":[{"id":1720,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/posts\/1712\/revisions\/1720"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/media?parent=1712"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/categories?post=1712"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/tags?post=1712"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/coauthors?post=1712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}