Typesetting
Typesetting means formatting all the texts that are going to be read on your website in such a way that they are legible (easy to read) and also in such a way that what is most important gets emphasized so that the reader's eye can identify it easily. This is different from logotype typesetting as we looked at on this page >>>.
-
The font that you use for your logo is a standalone item that will only be present in that one instance, so it can be more eccentric.
-
The font choice for typesetting and the things that you do to it will repeat themselves over and over again, they will be consistent throughout your site.
-
And they have a very different function from a logotype font - they need to be read and understood while the logo font is a visual marker, the main function of which is to be remembered, to create what we call "brand recognition".
-
In order to achieve the consistency and legibility that we need for typesetting we look at
-
Selecting the appropriate font
-
which means a font that has a big weight family in order to facilitate good hierarchies
-
and in the case of sans serifs that has condensed or semi condensed widths in order to facilitate ease of reading
-
or is a serif font.
-
(Note: We are talking about 2 different attributes here:
-
Weight: Is the thickness of the font's actual strokes which can go from Hairline and Extra Thin to Extra Black and lots of thicknesses in-between.
-
Width: This is the horizontal stretch of the letters of a font which can go from Ultra Compressed to Ultra Extended.)
Once a good font selection has been made we then proceed to typographic styling, and that includes formatting attributes such as
-
character spacing,
-
line spacing,
-
paragraph breaks,
-
alignments.
-
setting hierarchy with weights and sizes, which is something that we actually look at in detail on this page >>>.
Important
-
Please download your own fonts instead of using the Wix fonts.
-
Upload the full font family to Wix even if you don't think that you will be using all of them.
-
Set your site styles before you start placing your texts. Watch tutorial on how to do this here >>>.
Recommended Families Sans Serif:
(Most of these have condensed or semi condensed widths, please use the condensed widths and not the regular width for paragraph typesetting)
-
Barlow
-
Fira Sans
-
Exo 2 / Exo Condensed
-
Futura
-
Roboto Condensed
-
Encode
-
Saira Sans
-
Advent Pro
-
Georama
-
Sofia
(Note: All can be found on google fonts, except for Futura and Exo Condensed, and those you can download here >>>)
Recommended Families Serif:
-
Cormorant
-
Taviraj
-
Trirong
-
Fraunces
-
Bitter
-
Spectral
-
Noto Serif Georgian
-
Noto Serif Display
(Note: All can be found on google fonts.)
Condensed Fonts for Paragraph Texts
Below I have typeset the same exact text in three different ways: Top setting is a regular width sans serif, middle is a semi condensed width sans serif and on the bottom is a serif font.
-
The font size in all three is identical (17 px),
-
the character spacing is identical (-0.03),
-
the line spacing is identical (1.4)
What I would like you to do now is to read all three of these small paragraphs and decide upon which of these is easiest to read, and which is the hardest.
REGULAR SANS SERIF PARAGRAPH TYPESETTING: ROBOTO REGULAR
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.
SEMI CONDENSED SANS SERIF PARAGRAPH TYPESETTING:
ROBOTO CONDENSED
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.
SERIF PARAGRAPH TYPESETTING:
TIMES NEW ROMAN
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.
Unless you are a huge exception the easiest to read will have been the one in the middle, second will have been the serif font at the bottom and the hardest to read will have been the regular width sans serif at the top. And here is the reason for that:
Again, we have the same three fonts, identical font size, letter spacing and line spacing. Now, look at the difference in size between the red areas. In the top, we have very pronounced spaces between the letters and in the middle one noticeably less so. But then the lowest one still has pronounced spaces and yet it is also much easier to read than the top one. Here is why:
-
With the top and the middle specimens this is due to the shape of the round form letters which in the case of a regular width sans serif font are much rounder whereas in a condensed or semi condensed sans serif the shape of the round letters will be more like vertical rectangles. And this obviously decreases the spaces that from between the letters since the round letters can move much closer together because of their elongated shape.
-
When it comes to the serifs however, what makes them highly legible is not so much the shape of the letterforms but the fact that serif fonts have little "shoes" at their tips that form a natural baseline which connects all the letters, regardless of the spaces that come about from the rounded letters.
-
And in all cases it is actually the baseline, and how the letters "sit" and connect both to this baseline and to each other, that matters.
ıtalıcs
Italics are not fonts that simply give you another style of typesetting. They have very specific usages that always rely on texts that are typeset in regular fonts, inside of which some words are italicized, or a small piece of text (a caption or a spot) that is typeset in italics and is placed very near a piece of text that is typeset with a regular font. So, in order for the italic text to fulfill its function it always has to have a relationship to a bigger chunk of text that is not italic, since:
-
Italics are used to emphasize a certain word or phrase.
-
Italics are used to turn words, letters, and numbers into specific terms.
-
Italics are used when you want to show a contrast between two words or phrases.
-
Italics are used to denote book, movie or journal titles, or other publications including websites.
-
Italics can be used for captions or spots in order to make them stand out from the text stack that they are related to.
-
Italics are used in small paragraphs that have a function that stands apart from the rest of the text close to them, such as all the explanatory notes that I use on this website.
usage example
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.
Correct: Only some words are emphasized for emphasis.
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.
Wrong: The entire paragraph is italicized.
SERIf fonts
When it comes to working with Serif fonts there are certain things that you need to be aware of before you make your choice. I chose the Noto Serif family because:
-
This family has Display fonts which have a much higher contrast in the strokes that form the individual glyphs (characters). As you can see, some stroke angles are considerably thicker than others.
-
Display serif fonts look very beautiful however they are not easy to read in long texts at smaller pixel/point sizes.
-
I can use a Display font in a caption or a spot since these are short bits of texts. But I cannot use a Display serif font for the paragraph texts.
-
-
So, I need a second font, a regular serif, that is still related to the first font.
-
Noto Serif, does give me that variety: There is a Noto Serif Display and a Noto Serif Georgian which is a solid font that shares most attributes of the first one (they are from the same family, after all) but does not have that high contrast of the glyph strokes that the Display version has.
-
Bottom line: Be careful not to typeset paragraph texts with Display fonts.
-
Many of them will say "Display" in their names but some won't.
-
As an example both Bodoni and Didot are display fonts that do not have the word "display" in their names. They are both beautiful fonts that are very good for headings, subheads or captions but become extremely hard to read when set as a paragraph.
-
-
Just check and make sure that the strokes of the characters are roughly equal in all directions.
Font: Noto Serif Display
noto serıf dısplay
While the Display font does look very good it is quite difficult to read it when it becomes a paragraph text.
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.
Font: Noto Serif Georgian
noto serıf georgıan
The Regular serif font does not look as elegant for sure, especially when it is set in a bigger size as is the case with the heading and the subhead. However, it is much easier read when it is used to typeset a paragraph.
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.
Solution: Since these two fonts belong to the same family (Noto) combine them: Typeset the paragraph with Noto Serif Georgian and the Heading and Subhead with Noto Serif Display.
text Alıgnment IN paragraphs
There are 4 basic ways of alignment for paragraph typesetting and below you will find examples and explanatory texts for all 4 of them:
-
Left Aligned
-
Right Aligned
-
Centered
-
Justified
left alıgned
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.
This is the most widely used style of typesetting - for a very good reason, it is also the easiest to read. It is the natural setting for our eyes which are accustomed to have lines start from the left with the Latin alphabet. Unlike justified text (example bottom right) eft aligned text creates a natural spacing within the words which does not create holes and white rivers. So, this is the standard alignment for typesetting paragraphs for screen reading and it is the one that is recommended.
rıght alıgned
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.
Right aligned paragraphs are not that easy to read since we read from left to right with the Latin alphabet and for that reason a right aligned text confuses the eye. Nevertheless, there are usages for this type of alignment, especially with shorter text pieces such as spots. The second problem with right aligned paragraphs is that the punctuation marks that fall at the very end of the line tend to disrupt the alignment, as is the case with the second line ending with a comma in this example.
centered
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.
Centered text is very popular in web design, however it has its shortcomings when it comes to reading longer texts. These are the same as right aligned text issues: Our eyes expect to see a clearly aligned starting point of the lines which is naturally on the left since we read from left to right. So, same as right aligned texts, centered texts can be used for short pieces of text or headings but will not really work for lengthy paragraphs.
justıfıed
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.
This is the most problematic alignment since a justified text almost always makes holes inside the lines, which when two or more also fall directly below each other create what we call "white rivers" in typesetting. In this example we have 3 such white rivers: Both are between line 2 and 3. One comes right after the words kitchenware and inspirations and the next one right after the words and and from, and the third one after home and traditional. The only that such holes can be avoided is by having text that is small enough so that enough characters can be on one line - which is something that only works for print publications but not for the web where text is expected to be large enough to read comfortably on the screen.
font sızes for paragraphs
-
Choose a size that is easy to read.
-
The size of the text will vary with the font.
-
At the same pixel size one font may end up looking much bigger or smaller than another.
-
The weight and the width will also affect size,
-
condensed and light weight fonts will look smaller even at the same point size.
-
-
-
Below are examples that show you how change of font affects size and also what some good sizes for paragraph texts are. I have underlined the ones that work best with a red stroke.
This text is set in 19 pixels.
Font Barlow Semi Condensed Regular
This text is set in 22 pixels.
Font Barlow Semi Condensed Regular
This text is set in 17 pixels.
Font Barlow Semi Condensed Regular
This text is set in 19 pixels.
Font Fira Sans Condensed Regular
This text is set in 19 pixels.
Font Cormorant Medium
This text is set in 22 pixels.
Font Fira Sans Condensed Regular
This text is set in 22 pixels.
Font Cormorant Medium
This text is set in 17 pixels.
Font Fira Sans Condensed Regular
This text is set in 17 pixels.
Font Cormorant Medium
This text is set in 19 pixels.
Font Times New Roman
This text is set in 19 pixels.
Font Helvetica Regular
This text is set in 22 pixels.
Font Times New Roman
This text is set in 22 pixels.
Font Helvetica Regular
This text is set in 17 pixels.
Font Times New Roman
This text is set in 17 pixels.
Font Helvetica Regular
What this shows you is that a text set at 19 pixels with Barlow is about the correct size. There is no difficulty in reading it but on the other hand it isn't getting too big and clunky either. But the same 19 pixels are too small for reading with some fonts (Cormorant and Times New Roman) or things get too big and coarse with other fonts (Fira and Helvetica).
When it comes to 22 points, this is now working quite nicely for Cormorant, but is too big for all the others. They start to get too big and unwieldy. Even Times New Roman would need to go down 1 point to 21 points to get a good result.
17 points works very well for Fira and Helvetica which are now at a very good reading size that is also good looking visually. But 17 points is too small for all the others, including Barlow.
how large should paragraph texts be?
What we have above are the smallest sizes that a font should be if the text is meant to be read as a paragraph. You can go larger, of course. But when you do so you also need to be aware that:
-
you may end up with a size that is too large to read.
-
This has to do with how many words fit onto a line.
-
The larger the size / and the narrower your column width, the fewer words there will be and you could easily get into a situation where
-
you have so few words in al line that reading becomes very difficult since the reader's eye has to jump to the next line only after a very short interval.
-
-
-
and you should also take into account that the larger your paragraph text size is the larger your heading and subheading will also be and that may result in very large sizes indeed.
Character and Line Spacing in Paragraph Texts
Character and line spacing changes will usually be very subtle, and you may wonder whether they are even worth bothering with. Trust me they are. They do make a big difference as to how easily your paragraphs are read and they can help make your typesetting become more elegant and well thought out. And these are differences that will get noticed at a subliminal level by your readers.
Font: Helvetica. Font Size: 18. Character Spacing: 0. Line Spacing 1.4.
Font: Helvetica. Font Size: 18. Character Spacing: -0.03. Line Spacing: 1.4.
Font: Helvetica. Font Size: 18. Character Spacing: -0.05. Line Spacing 1.5.
Font: Exo 2 Condensed Regular. Font Size: 18. Character Spacing: -0.03. Line Spacing: 1.5.
Font: Fira Sans Condensed Regular. Font Size: 18. Character Spacing: -0.03. Line Spacing: 1.5.
Font: Fira Sans Condensed. Font Size: 16. Character Spacing: -0.03. Line Spacing: 1.7
The default paragraph font that Wix gives you is Helvetica (not an optimal font for paragraph typesetting, unless the condensed version is used - which in this case it isn't), 18 points, character spacing 0, and line spacing 1.4. While at 18 points the line spacing of 1.4 is a good value, the character spacing should be reduced by a tiny amount, which is what I did in the second screenshot.
Above I went through a progression where I played around with some other values and then changed the font, first to Exo 2 Condensed and then to Fira Condensed, both of which give a much better result than Helvetica, which is of course only present in its default width on the Wix Editor font list.
Paragraph Breaks
We now come to an important issue which is actually the result of a shortcoming of Wix. On most web editors, especially those associated with blogging platforms, the editor automatically sets an added pixel value to create additional space when you make a paragraph break. In Wix this currently doesn't exist, even though it is something that has been widely requested by Wix users.
So, in the absence of a proper way to do it, what many people do is press enter twice in order to show the paragraph break. This creates a huge space between the paragraphs that breaks up the text grouping very badly. The correct thing to do is to paste the paragraphs as separate pieces of text and then to manually adjust the space between them.
The two text columns below show you the difference and the screenshot below them shows you the little purple markers that will pop up as you manually adjust the spacing to help you get the exact amount.
WRONG
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.
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!
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.
CORRECT
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.
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!
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.
The purple guides that I am pointing out with red arrows in this screenshot can help you bring about an exact equal space between your paragraphs. Only problem: They seem to be erratic. Sometimes they show up, other times they don't.
Alignment of Paragraph Texts ın a page and also across many pages
I have described the way to do this in other pages on this site, but here it is again:
-
In order to do this we use the header elements as alignment points.
-
Place guides on the left hand and right hand side of your logo on the header.
-
Place guides on the left and right hand side of your menu.
-
-
Use these guides to align headlines, paragraphs and other elements such as images, boxes on your page since these guides will be present on your page and not only on the header.
-
Since these guides will be in exactly the same position on all your pages use them on all pages and you will get a universal alignment that is the same across your entire site.
In the long screenshot on the right I have pieced together two segments of this page that you are on right now, to show you how the vertical guides that are placed on both sides of the two header elements get used to align things on the page itself.
What you are seeing here is only this page but when you go to other pages you will be able to see that I have used the same exact guides to align things on those pages also.
A cross-page and cross site alignment such as this is important in that it gives a continuity from page to page which makes it easier for your visitors to follow the content since their eyes will know where to look on every new page that they get to.
