gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added line breaks for readability (#30264)

Browse Source 
* Added line breaks for readability

* change breaks to a list with breaks

markdownize link
remove codeblock formatting in first section
This commit is contained in:
Ronttikasa
2019-01-19 01:08:16 +02:00
committed by Tom
parent 2ab6bdeb79
commit 81a4ec42ba
1 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
guide/english/typography/typographic-hierarchy/index.md
View File

@ -2,28 +2,29 @@
title: Typographic Hierarchy title: Typographic Hierarchy
--- ---
## 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. 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
- Size
This is the easiest and most common method for establishing hierarchy. This is the easiest and most common method for establishing hierarchy.
-Weight - Weight
Simply using a bolder weight of a font can help isolate. 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. 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. 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. A great way to achieve hierarchy is to use contrasting typefaces.
Spacing Matters! - 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. 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: #### 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)