From 81a4ec42ba3c3d2abadfd786a9695bb8742bec79 Mon Sep 17 00:00:00 2001 From: Ronttikasa <44512829+Ronttikasa@users.noreply.github.com> Date: Sat, 19 Jan 2019 01:08:16 +0200 Subject: [PATCH] Added line breaks for readability (#30264) * Added line breaks for readability * change breaks to a list with breaks markdownize link remove codeblock formatting in first section --- .../typography/typographic-hierarchy/index.md | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/guide/english/typography/typographic-hierarchy/index.md b/guide/english/typography/typographic-hierarchy/index.md index 274dfe2432..4e6495b893 100644 --- a/guide/english/typography/typographic-hierarchy/index.md +++ b/guide/english/typography/typographic-hierarchy/index.md @@ -2,28 +2,29 @@ title: Typographic Hierarchy --- ## Typographic Hierarchy - A webpage itself has a hierarchy that not only is read, but contains interaction. The page as a whole must be designed in a way that clearly communicates to the user what actions are available and how to easily access the information they seek, how to purchase an item, etc. +A webpage itself has a hierarchy that not only is read, but contains interaction. The page as a whole must be designed in a way that clearly communicates to the user what actions are available and how to easily access the information they seek, how to purchase an item, etc. - For the purpose of this article, however, we’re talking strictly about hierarchy as it applies to type. Luckily for us, we have our own handy HTML tag that lets us semantically establish typographic hierarchy into the websites we build. Heading tags (H tags) allow us to specify an order of importance into our content: H1 through H6, H1 being most important, H6 being least. Search engines use this data to interpret priority of content on a webpage.The H tag can be styled by using the following attributes. --Size +For the purpose of this article, however, we’re talking strictly about hierarchy as it applies to type. Luckily for us, we have our own handy HTML tag that lets us semantically establish typographic hierarchy into the websites we build. Heading tags (H tags) allow us to specify an order of importance into our content: H1 through H6, H1 being most important, H6 being least. Search engines use this data to interpret priority of content on a webpage.The H tag can be styled by using the following attributes. + +- Size This is the easiest and most common method for establishing hierarchy. --Weight +- Weight Simply using a bolder weight of a font can help isolate. --Color +- Color Color plays a big role in what our eye sees as primary and secondary. Generally speaking; warm colors pop, cooler colors recede. --Position +- Position Where sections of information are positioned in relationship to each other can establish a hierarchy. --Type Contrast +- Type Contrast A great way to achieve hierarchy is to use contrasting typefaces. -Spacing Matters! - One of the most important concepts in type design is spacing. It’s one of the most difficult concepts to grasp for beginning designers, yet it is also one of the most visually obvious. Proper typographic spacing is critical in establishing hierarchy; it can make the difference between confusion and clarity. It is used in the majority of hierarchical systems, and it is present in all of the examples in this article. +- Spacing +One of the most important concepts in type design is spacing. It’s one of the most difficult concepts to grasp for beginning designers, yet it is also one of the most visually obvious. Proper typographic spacing is critical in establishing hierarchy; it can make the difference between confusion and clarity. It is used in the majority of hierarchical systems, and it is present in all of the examples in this article. #### More Information: -You can refer-https://webdesign.tutsplus.com/articles/understanding-typographic-hierarchy--webdesign-11636 +[webdesign.tutsplus.com - Understanding Typography Hierarchy](https://webdesign.tutsplus.com/articles/understanding-typographic-hierarchy--webdesign-11636)