IT Center Blog: 7 Simple Typography Tips For Your Designs
IT-Center Logo
IT Center site title

Hello, this is IT Center Blog.

Company news from the first hand: everything that happened in IT Center yesterday, the day before yesterday and last Thursday. All publications are cleaned from white noise and synchronized with RSS feed.

Useful Mailing

IT tips and cases for your business, every 10 days, without water, without spam.



Recent

Tags

7 Simple Typography Tips For Your Designs

05.06.2017
typography handmade

How often did you go to the site and shut down the page immediately because the resource materials are unreadable? The words merge into a mess, the lines run over each other, and the  gaze stumbles over the unions dangling at the end of the line.

Qualitative illustrations, which emphasize the topic of the article, attract attention and make you read the text. Neat, accurate layout of the text works for the same result, and to achieve this result does not require a lot of investment. Several improvements — and materials will be easier to perceive by readers and indexed by search engines.

Paragraphs and Subheadings

The first thing to do if you are preparing a long text for publication is to split the material into logical parts. Title each part and wrap each title in tags h2, h3, etc. The search engines like it and it makes easier to work on the overall style of the article.

Divide each piece into paragraphs. The division of the long text into parts sets the schedule for the entire article, emphasizes the logic of the narrative, gives rest to the eyes and draws attention to subtitles when reading diagonally.

One and the same text in two layouts. Which version is easier to read?

Site developing with CMS or not it's your choice and our possibility. Fresh sites without CMS is a great alternative to do everything. IT Center site is a fresh site too. You can select a hoster by yourself or you can accept your choice consultation with us. It's very important question for the customer's site good life. How to register the site in the search systems? How to include the search counter? How to get the top positions in the searching systems? We will help you to answer these questions. We are ready to consult the Customer's copywriters. We are sure that a good site article is a result of the employee's competence.

Developing

Site developing with CMS or not it's your choice and our possibility. Fresh sites without CMS is a great alternative to do everything. IT Center site is a fresh site too.

Publish the site into Internet

You can select a hoster by yourself or you can accept your choice consultation with us.

SEO optimization

It's very important question for the customer's site good life. How to register the site in the search systems? How to include the search counter? How to get the top positions in the searching systems? We will help you to answer these questions.

Education and Consulting

We are ready to consult the Customer's copywriters. We are sure that a good site article is a result of the employee's competence.

Hanging Prepositions and Articles

A line of text that ends with prepositions or articles is hard to read and looks cut off. To avoid this, these type constructions are glued together with an indissoluble blank with the following word. A non-breaking space prevents the browser from transferring sentences to a new line at the glue location.

See the Pen Harry Potter Eng by ItCntr (@itcntr) on CodePen.

15 beads, June 2 and 12 km/h

The rule is similar to the previous one. Values and their dimensions, objects and their quantity are written on one line, not allowing the numeral to ‘hang’. For this, both graphemes are glued together in an indissoluble gap.

See the Pen Moscow Summer Eng by ItCntr (@itcntr) on CodePen.

Non‑breaking Hyphen

A non‑breaking hyphen is used when you want to prevent the division of hyphens into two parts when changing from one line to another. This category includes, for example, compound names of  their own, for which the transfer is irrelevant in principle.

See the Pen non-breaking by ItCntr (@itcntr) on CodePen.

Dash Instead of a Hyphen

Replacing a dash with a hyphen is a typographical and grammatical error, which is tempting to perform day after day: the hyphen is present on any keyboard, but there is no dash. Nevertheless, if there is a long dash in the text, it is written through the code — And glue the previous word with an indissoluble blank. The exception is when the dash stands at the beginning of a line and indicates a direct speech. In this case, the dash is glued together with an indissoluble blank with the following word.

See the Pen mdash-eng by ItCntr (@itcntr) on CodePen.

Copyright Mark

Specific symbols, such as a copyright sign or a degree sign, are added to the text of the article using a numeric code or name. Alternatives like (c) instead of © look helpless and unprofessional.

See the Pen copy-trade by ItCntr (@itcntr) on CodePen.

Quotes

Quotes repeat the fate of a long dash: there are no correct quotes on the computer keyboard, so they are manually entered with numeric or alphabetic codes. In addition, the appearance of quotes varies from language to language. For the text in Russian, the inner quotes are formatted with quotation marks: „”, their codes „, ”, external — with quotation marks « » with codes «, ». The same pair for the English text: internal quotes “” with codes “, ”, external quotes: ‘ ‘, its codes are ‘ and ’.

See the Pen Nimbus 2000 by ItCntr (@itcntr) on CodePen.

Сonclusion

When formal layout rules are implemented, look at the text as a picture and evaluate the graphics of the web page. To do this, reduce the scale of the browser page to 40‑50%.

How do sentences flow in a paragraph? How do paragraphs interact with each other? If the text looks too tight, play with the line spacing and the font size.

And then compare the page with the page that was in the beginning. You will like the result.

© 2009–2017 IT Center

129347, Moscow,
Prokhodchikov street 16, build 1,
Wesendorf Business Centre

tel.: +7 (495) 120-0-129
e-mail: info@it-cntr.com