{"id":365,"date":"2019-09-18T14:53:15","date_gmt":"2019-09-18T14:53:15","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/?p=365"},"modified":"2019-10-02T13:18:41","modified_gmt":"2019-10-02T13:18:41","slug":"class-7-learning-typographic-hierarchy","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/2019\/09\/18\/class-7-learning-typographic-hierarchy\/","title":{"rendered":"Class 7: Learning Typographic Hierarchy"},"content":{"rendered":"\n<p>Today were are going to go deeper into typographic hierarchy.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">PART 1 What is Typographic Hierarchy<\/h3>\n\n\n\n<p>We will look at and discuss my (updated) post on Typographic Hierarchy: <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/2019\/09\/16\/typographic-hierarchy\/\">https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/2019\/09\/16\/typographic-hierarchy\/<\/a> <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">PART 2: Examples and Inspiration<\/h3>\n\n\n\n<p>Next we will look at the following for examples and inspiration related to typography and hierarchy:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Typewolf Site if the day; <a href=\"https:\/\/www.typewolf.com\/site-of-the-day\">https:\/\/www.typewolf.com\/site-of-the-day<\/a> <ul><li><a href=\"https:\/\/www.typewolf.com\/site-of-the-day\/american-factory-film\">https:\/\/www.typewolf.com\/site-of-the-day\/american-factory-film<\/a> <\/li><li><a href=\"https:\/\/www.typewolf.com\/site-of-the-day\/talentful\">https:\/\/www.typewolf.com\/site-of-the-day\/talentful<\/a><\/li><li><a href=\"https:\/\/www.typewolf.com\/site-of-the-day\/atolla\">https:\/\/www.typewolf.com\/site-of-the-day\/atolla<\/a><\/li><li><a href=\"https:\/\/www.typewolf.com\/site-of-the-day\/aristide-benoist\">https:\/\/www.typewolf.com\/site-of-the-day\/aristide-benoist<\/a><\/li><li><a href=\"https:\/\/www.typewolf.com\/site-of-the-day\/floris-van-driel\">https:\/\/www.typewolf.com\/site-of-the-day\/floris-van-driel<\/a><\/li><\/ul><\/li><li>People who write about type<ul><li>Samantha Warren: <a href=\"http:\/\/samanthatoy.com\/\">http:\/\/samanthatoy.com\/<\/a><\/li><li>Jason Santa Maria: <a href=\"http:\/\/jasonsantamaria.com\/\">http:\/\/jasonsantamaria.com\/<\/a> <\/li><li>Jason Pamental: <a href=\"https:\/\/rwt.io\/\">https:\/\/rwt.io\/<\/a> <\/li><\/ul><\/li><li>CodePen Examples<ul><li>Inventive use of text-shadow and z positioning <a href=\"https:\/\/codepen.io\/chriseisenbraun\/pen\/upmDB\">https:\/\/codepen.io\/chriseisenbraun\/pen\/upmDB<\/a> <\/li><li>Sandbox to play with some of the properties: <a href=\"https:\/\/codepen.io\/carolynmcneillie\/pen\/Lewxrm?editors=1100#0\">https:\/\/codepen.io\/carolynmcneillie\/pen\/Lewxrm?editors=1100#0<\/a> <\/li><li>line length, type scale, first letter: <a href=\"https:\/\/codepen.io\/alemieux\/pen\/wBKLJd\">https:\/\/codepen.io\/alemieux\/pen\/wBKLJd<\/a> <\/li><li>large fonts, absolute positioning, complex use of span: <a href=\"https:\/\/codepen.io\/andyhullinger\/pen\/ogwBdb?editors=1100\">https:\/\/codepen.io\/andyhullinger\/pen\/ogwBdb?editors=1100<\/a> <\/li><li>big block quote, uses sass and pug: <a href=\"https:\/\/codepen.io\/matthewbeta\/pen\/hcBeL\">https:\/\/codepen.io\/matthewbeta\/pen\/hcBeL<\/a> <\/li><\/ul><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">PART 3: Try it out in Groups<\/h3>\n\n\n\n<p>For this part of the class we will break up into groups and in your groups you will<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Go to this CodePen: <a href=\"https:\/\/codepen.io\/profstein\/pen\/zYOmvJo\">https:\/\/codepen.io\/profstein\/pen\/zYOmvJo<\/a> <\/li><li>Make sure one of you is signed in and Fork it<\/li><li>Style the text to give a hierarchy<\/li><\/ol>\n\n\n\n<p>This is taken from the article we looked at from the Thinking with Type book, <a href=\"http:\/\/thinkingwithtype.com\/text\/#heirarchy\">http:\/\/thinkingwithtype.com\/text\/#heirarchy<\/a>. You can use the examples there for inspiration or go your own way.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today were are going to go deeper into typographic hierarchy. PART 1 What is Typographic Hierarchy We will look at and discuss my (updated) post on Typographic Hierarchy: https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/2019\/09\/16\/typographic-hierarchy\/ PART 2: Examples and Inspiration Next we will look at the following for examples and inspiration related to typography and hierarchy: Typewolf Site if the day; [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":371,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"categories":[10,12,25,48],"tags":[46,62],"class_list":{"0":"post-365","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css","8":"category-design","9":"category-in-class-information","10":"category-typography","11":"tag-typographic-hierarchy","12":"tag-web-typography","13":"czr-hentry"},"_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/posts\/365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/comments?post=365"}],"version-history":[{"count":3,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/posts\/365\/revisions"}],"predecessor-version":[{"id":370,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/posts\/365\/revisions\/370"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/media\/371"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/media?parent=365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/categories?post=365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/tags?post=365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}