HIERARCHIES
The next step from typesetting >>> is setting up relationships between different pieces of texts to create a stack that allows the reader to make sense of what is in front of them. There has to be a start point which summarizes what is to come and to arouse interest in what is to follow and then the rest has to follow in a way that makes it easy to navigate the content.
We achieve this hierarchy by combining font sizes, weights, widths and spacings that are distributed among the components of the stack.
BIG FAMILIES FOR GOOD HIERARCHIES
The screenshot on the right shows you the full family, with all the weights, i. e., thicknesses of the font Roboto, as it appears on google fonts.
For typesetting we look for fonts that have as much variety of weight as possible since this will make it much easier for us to set up an informational hierarchy: For obvious reasons, a bold weight will draw far more attention than a regular weight and that, in its turn, will draw more attention than a light weight.
Note: Please do not use Wix Fonts, instead upload your own. Reason: Wix will only give you limited weights whereas you need a wider family.
Sans Serif Families:
-
Barlow
-
Fira Sans
-
Exo 2 / Exo Condensed
-
Futura
-
Roboto Condensed
-
Encode
-
Saira Sans
-
Advent Pro
-
Georama
-
Sofia
Serif Families:
-
Cormorant
-
Taviraj
-
Trirong
-
Fraunces
-
Bitter
-
Spectral
-
Noto Serif Georgian
(Note: All font suggestions can be found on google fonts, except for Futura and Exo Condensed, and those you can download here >>>)
examples
components
-
Heading: This is a sentence that can either summarize what is in the paragraphs to follow or can be a sort of teaser that prompts the visitor's interest to read more.
-
A heading is a "must have" element without which we do not get a proper hierarchical stacking, making it hard for the visitor to follow the content.
-
-
Subhead: In some cases a heading may need a further, extended description, which then becomes a subhead.
-
A subhead is not a "must have" hierarchical element, you can have it or leave it out, depending on the needs of your textual information.
-
-
Paragraph Entries: Sometimes the first paragraph in a lengthier text can get emphasized in order to heighten interest on behalf of the reader, by a size or weight increase from the format of the paragraph text.
-
A paragraph entry is not a "must have" hierarchical element, you can have it or leave it out, depending on the needs of your textual information.
-
-
Paragraphs: This is the all important central component in which the actual, detailed information is conveyed.
-
The paragraph is a "must have" element without which we do not get a proper hierarchical stacking, making it hard for the visitor to follow the content.
-
-
Spots: These are small pieces of text that are duplicated from the body text and placed on the page separately while the text that it is duplicated from also remains inside the body text.
-
So, a spot is an emphasis that comes about through repeating something important, something catchy inside the full text as a separate visual element in order to maintain the reader's interest in the full text.
-
A spot is not a "must have" hierarchical element, you can have it or leave it out, depending on the needs of your textual information.
-
-
Captions: These are small pieces of text that are put under images. They will usually be descriptive of what is shown in the image, but they can also function as mini-spots.
-
A caption is not a "must have" hierarchical element, you can have it or leave it out, depending on the needs of your textual information.
-
In the hierarchies below I paid attention to:
-
Spacing:
-
I have put the Heading and the Subhead closer to each other so that we know that they closely follow each other as sounds (please watch the videos above to get a better understanding of what I mean by this).
-
and then left extra an space between this 2 line grouping and the Paragraph Entry that follows them, so that again, we show that it is apart from the heading grouping.
-
I also left an extra space between this Paragraph Entry and the actual Paragraphs that make up the bulk of the stack to show that it is also apart from the actual paragraphs, that it has more emphasis than they do.
-
I placed the picture not too far from the paragraph column since this picture and the text belong together, so they should not be placed too far apart.
-
The caption was placed directly below the picture since it belongs to the picture.
-
The spot was placed much further down, so that it does not get confused with the caption, it stays as an unambiguously separate item.
-
-
Alignment:
-
I aligned the picture with the top of the Paragraph Entry, rather than the Heading since it is always better to align things in such a way that you get good parallel lines between them. The Heading and the Subhead are only two lines and as such are not tall enough to give me that good parallel line.
-
I aligned the caption and the spot from the right, rather than the left for the same reason. When this is done, again, a good strong parallel is being obtained.
-
Finally, I aligned the caption and the spot to the image vertically.
-
sızes + spacıngs
Once a Spice Shop, always a Spice Shop?
Well, we still are a Spice Shop, but nowadays we are so much more!
Hierarchy only with sizes:
-
Sizes: from 16 to 40 pixels.
-
One width: Barlow Semi Condensed.
-
One weight: Regular
Dashing Hangouts, Food, Clothing, Household Products and much much more!
Tekir Efendi, one of the most respected merchants of the old Istanbul Spice Market, sets sail to contemporary lifestyles through a diverse range of products and services catering to the needs and tastes of an urban chic clientele!
We have taken traditional Eastern Mediterranean / Middle Eastern Cuisine and given it a makeover to fit the needs of the fast paced lifestyle of today’s Istanbul.
Regardless of whether you dine in one of our dashing cafes, or shop from our market, or have the goodies delivered directly to your doorstep - get ready for a dining experience that is rich in taste as well as good nutrition since it has been created entirely out of organic products grown in season, locally.
Unique home accessories that take their inspirations from the traditional crafts of Anatolia which our artists and designers combine with the streamlined tastes and needs of contemporary urban lifestyles.
Our land is renowned for high quality cotton, linen and wool farming. We have entered collaborations with some of Turkey’s best known textile manufacturers to create our own line of home textiles, covering a wide range of items from bed linen to towels, rugs, dining accessories, and much more.
We are also collaborating with ceramic, wood, metal and glass artists and collectives to bring forth our own lines of tableware, kitchenware and unique home accessories that take their inspirations from the traditional crafts of Anatolia which our artists and designers combine with the streamlined tastes and needs of contemporary urban lifestyles.
sızes + wıdths + weıghts + spacıngs
Hierarchy w. weights, widths and sizes:
-
Sizes: from 14 to 45 pixels.
-
Two widths: Barlow Regular and Barlow Semi Condensed.
-
Three weights: Regular, Medium and Light
Once a Spice Shop, always a Spice Shop?
Well, we still are a Spice Shop, but nowadays we are so much more!
Dashing Hangouts, Food, Clothing, Household Products and much much more!
Tekir Efendi, one of the most respected merchants of the old Istanbul Spice Market, sets sail to contemporary lifestyles through a diverse range of products and services catering to the needs and tastes of an urban chic clientele!
We have taken traditional Eastern Mediterranean / Middle Eastern Cuisine and given it a makeover to fit the needs of the fast paced lifestyle of today’s Istanbul.
Regardless of whether you dine in one of our dashing cafes, or shop from our market, or have the goodies delivered directly to your doorstep - get ready for a dining experience that is rich in taste as well as good nutrition since it has been created entirely out of organic products grown in season, locally.
Unique home accessories that take their inspirations from the traditional crafts of Anatolia which our artists and designers combine with the streamlined tastes and needs of contemporary urban lifestyles.
Our land is renowned for high quality cotton, linen and wool farming. We have entered collaborations with some of Turkey’s best known textile manufacturers to create our own line of home textiles, covering a wide range of items from bed linen to towels, rugs, dining accessories, and much more.
We are also collaborating with ceramic, wood, metal and glass artists and collectives to bring forth our own lines of tableware, kitchenware and unique home accessories that take their inspirations from the traditional crafts of Anatolia which our artists and designers combine with the streamlined tastes and needs of contemporary urban lifestyles.
font combinations
The things that I wrote above apply to this stack as well. The only difference here is that instead of using only one sans serif font I typeset the paragraph texts, the caption and the spot with a serif font, in this case Noto Serif Georgian for the paragraphs and Noto Serif Display Semi Condensed for the caption and the spot.
Note: Although I used the Noto Serif Georgian for the Paragraphs in this stack, I could also have done the opposite and typeset the Heading, the Subhead and maybe even the Paragraph Entry with the Serif font and used the Sans font for the paragraph texts only. Had I chosen this option I would have gone with the Display font for the Heading etc. since a Display font will of course look much nicer and far more elegant than the regular version - provided it is used in the correct places which are not too lengthy texts that need to be read for a longer time.
Hierarchy with Font Combinations:
-
Three Fonts: Barlow, Noto Serif Georgian, Noto Serif Display
-
Sizes: from 15 to 45 pixels.
-
Three widths: Barlow Semi Condensed, Noto and Noto Semi Condensed.
-
Three weights: Regular, Medium and Light
Dashing Hangouts, Food, Clothing, Household Products and much more!
Tekir Efendi, one of the most respected merchants of the old Istanbul Spice Market, sets sail to contemporary lifestyles through a diverse range of products and services catering to the needs and tastes of an urban chic clientele!
We have taken traditional Eastern Mediterranean / Middle Eastern Cuisine and given it a makeover to fit the needs of the fast paced lifestyle of today’s Istanbul.
Once a Spice Shop, always a Spice Shop?
Well, we still are a Spice Shop, but nowadays we are so much more!
Regardless of whether you dine in one of our dashing cafes, or shop from our market, or have the goodies delivered directly to your doorstep - get ready for a dining experience that is rich in taste as well as good nutrition since it has been created entirely out of organic products grown in season, locally.
Unique home accessories that take their inspirations from the traditional crafts of Anatolia which our artists and designers combine with the streamlined tastes and needs of contemporary urban lifestyles.
Our land is renowned for high quality cotton, linen and wool farming. We have entered collaborations with some of Turkey’s best known textile manufacturers to create our own line of home textiles, covering a wide range of items from bed linen to towels, rugs, dining accessories, and much more.
We are also collaborating with ceramic, wood, metal and glass artists and collectives to bring forth our own lines of tableware, kitchenware and unique home accessories that take their inspirations from the traditional crafts of Anatolia which our artists and designers combine with the streamlined tastes and needs of contemporary urban lifestyles.