{"id":42,"date":"2022-10-19T17:49:00","date_gmt":"2022-10-19T17:49:00","guid":{"rendered":"https:\/\/mjonesdesign.co.uk\/blog\/?p=42"},"modified":"2023-02-25T17:50:06","modified_gmt":"2023-02-25T17:50:06","slug":"css-feedback-and-on-web-typography","status":"publish","type":"post","link":"https:\/\/mjonesdesign.co.uk\/blog\/2022\/10\/19\/css-feedback-and-on-web-typography\/","title":{"rendered":"CSS Feedback and On Web Typography"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Class 5: What I Learned This Week\u2026<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Advised to avoid using id and class in CSS if possible.<\/li>\n\n\n\n<li>To keep code simpler and cleaner, you don\u2019t need to use a class for each link to design the buttons.<\/li>\n<\/ul>\n\n\n\n<p>This week I struggled with my designing of links in CSS as I had one section for the navigation, and a separate section for my module links on a specific page. I didn\u2019t want these to be edited in the same way as my \u2018buttons\u2019 as I just wanted them to be simple, recognisable links. I finally found a fix in which I had to declare in my CSS that if a link has a div parent, and that has a ul child, which has a li child, then that particular link (anchor tag) will be designed in this way (nav&gt;ul&gt;li&gt;a). My module hyperlinks were left as a { } and so that rule didn\u2019t apply to them.<\/p>\n\n\n\n<p><strong>On Web Typography<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>No more than 2 typefaces should be used<\/li>\n\n\n\n<li>Good typography reinforces the meaning of the text and what you\u2019re trying to express<\/li>\n\n\n\n<li>You must remember that what you\u2019re making is for the benefit of the reader, not writer, therefore you need to ensure it is as accessible as you can make it<\/li>\n\n\n\n<li>For quotes you should change the weight and colour etc.<\/li>\n\n\n\n<li>Serif font was inherited from print as it is used to guide the eye along line of text such as on a newspaper when the text size is small. This makes it easier to read.<\/li>\n\n\n\n<li>The Times New Roman\/Times font names originated from the Times newspaper.<\/li>\n\n\n\n<li>Serif is used for headings and sans serif is used for the body to make a contrast and clarity of what they are and what they mean<\/li>\n\n\n\n<li>The rule to remember for text alignment is that you want a flush left and ragged right.<\/li>\n<\/ul>\n\n\n\n<p><strong>Hyphen, En Dash &amp; Em Dash<\/strong><\/p>\n\n\n\n<p>The hyphen is used for compound terms such as &#8216;check-in&#8217;. Whereas the en dash is used to represent a range or connection such as dates and places, 2022-2023. And finally the em dash can replace commas, paranthesis or colons to mark off additional information that isn&#8217;t essential to understand the sentence &#8212; this is the longest of the three.<\/p>\n\n\n\n<p><strong>Useful References<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The Visual Dictionary of Typography &#8211; Gavin Ambrose &amp; Paul Harris<\/li>\n\n\n\n<li>On Web Typography &#8211; Jason Santa Maria<\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/webflow.com\/blog\/typographic-design?utm_source=google&amp;utm_medium=search&amp;utm_campaign=Google-Search-Dynamic-Search-Ads-Core-BBSS&amp;utm_term=aud-936979375321:dsa-1636392187899___585305490218___ss_paid-bb&amp;gclid=EAIaIQobChMIjsOTqcX3-gIVSvZ3Ch19-QUjEAMYASAAEgKFAPD_BwE\">https:\/\/webflow.com\/blog\/typographic-design?utm_source=google&amp;utm_medium=search&amp;utm_campaign=Google-Search-Dynamic-Search-Ads-Core-BBSS&amp;utm_term=aud-936979375321:dsa-1636392187899___585305490218___ss_paid-bb&amp;gclid=EAIaIQobChMIjsOTqcX3-gIVSvZ3Ch19-QUjEAMYASAAEgKFAPD_BwE<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Class 5: What I Learned This Week\u2026 This week I struggled with my designing of links in CSS as I had one section for the navigation, and a separate section for my module links on a specific page. I didn\u2019t want these to be edited in the same way as my \u2018buttons\u2019 as I just [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-42","post","type-post","status-publish","format-standard","hentry","category-design-for-web-content"],"_links":{"self":[{"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/posts\/42","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":1,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/posts\/42\/revisions"}],"predecessor-version":[{"id":43,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/posts\/42\/revisions\/43"}],"wp:attachment":[{"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=42"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=42"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}