{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Ilya Birman’s Blog: posts tagged typography", "_rss_description": "Ilya Birman’s blog on design, cities, music, and life", "_rss_language": "en", "_itunes_email": "ilyabirman@ilyabirman.net", "_itunes_categories_xml": "<\/itunes:category>\r\n<\/itunes:category>\r\n\r\n", "_itunes_image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/userpic\/userpic-square@2x.jpg?1573933764", "_itunes_explicit": "no", "home_page_url": "https:\/\/ilyabirman.net\/meanwhile\/tags\/typography\/", "feed_url": "https:\/\/ilyabirman.net\/meanwhile\/tags\/typography\/json\/", "icon": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764", "authors": [ { "name": "Ilya Birman", "url": "https:\/\/ilyabirman.net\/meanwhile\/", "avatar": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764" } ], "items": [ { "id": "348", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/matching-typography-israel\/", "title": "Matching the typography of the three languages in Israel", "content_html": "

In Israel, many signs are given in three languages: Hebrew, Arabic, and English. The three writing systems are very different, but sometimes designers try to find somewhat similar fonts to make all three work together.<\/p>\n

The idea is good in itself, but the result is often poor.<\/p>\n

The first picture is of the light rail station in Tel Aviv:<\/p>\n

\n\"\"\n<\/div>\n

Everything seems to be equally low-contrast, straightforward, and close to pure grapheme. But the line heights and the stroke widths are all different, so it looks very sloppy.<\/p>\n

The second picture is of a beautiful sign at the Rehovot police station:<\/p>\n

\n\"\"\n<\/div>\n

Each writing system is being true to itself instead of trying to mimic a foreign one, but the whole thing still looks very consistent due to the same range of stroke widths.<\/p>\n", "summary": "In Israel, many signs are given in three languages: Hebrew, Arabic, and English. The three writing systems are very different, but sometimes designers try to find somewhat similar fonts to make all three", "date_published": "2022-11-25T01:12:16+03:00", "date_modified": "2022-11-25T01:16:36+03:00", "tags": [ "hebrew", "Israel", "typography" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/israel-three-langs-elifelet.jpg", "_date_published_rfc2822": "Fri, 25 Nov 2022 01:12:16 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "348", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/israel-three-langs-elifelet.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/israel-three-langs-rehovot.jpg" ] } }, { "id": "332", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/quoted-links\/", "title": "The best way to make a text in quotes into a link", "content_html": "

Sometimes you may need to make a text in quotes into a link:<\/p>\n

\n\"Quoted\n<\/div>\n

Many designers notice that underlined quote marks look bad, so they exclude them from the link:<\/p>\n

\n\"Correctly\n<\/div>\n

However, meaning-wise and in terms of Fitts’s law, the quote marks should be included in the link: they are related in meaning to the text inside them, not outside them, and it’s easier to click a larger link.<\/p>\n

So the best way to make a text in quotes into a link is to make the whole thing a link while underlining only the text:<\/p>\n

\n\"Correctly\n<\/div>\n", "summary": "Sometimes you may need to make a text in quotes into a link", "date_published": "2022-10-03T19:58:33+03:00", "date_modified": "2022-10-03T19:57:45+03:00", "tags": [ "quotes", "typography" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/quoted-link-bad-en@2x.png", "_date_published_rfc2822": "Mon, 03 Oct 2022 19:58:33 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "332", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/quoted-link-bad-en@2x.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/quoted-link-ok-en@2x.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/quoted-link-good-en@2x.png" ] } }, { "id": "292", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/headings-hierarchy\/", "title": "Headings hierarchy", "content_html": "

It’s a common mistake to denote heading level by its font size only. The popular Bootstrap CSS framework does exactly that:<\/p>\n

\n\"\"\n<\/div>\n

When you see this picture, it makes sense: the higher the level, the bigger the heading. The problem: this works only when you put these headings next to each other. But when you use six levels of headings in a real text, these styles will not help establish the structure. From the reader’s perspective, they would be just randomly-sized headings. To see an example, open the Bootstrap’s own documentation<\/a> in the middle of its page.<\/p>\n

Now look at this example from Wireless DJ help page<\/a>:<\/p>\n

\n\"\"\n<\/div>\n

The progression of sizes is not the only design tool here.<\/p>\n

There is only one main heading (aka h1) on a well-edited page, and it’s on top. So from the structural point of view it doesn’t matter what it looks like. It makes sense to make it large though.<\/p>\n

The second-level headings (h2s) are larger than the body text, but what’s even more important, they have generous margins around them, and the top margins are visibly larger than the bottom ones. This helps link the headings to their text and separate the sections from each other.<\/p>\n

The third-level headings (h3s) are not just smaller than the second-level ones. They are actually of the same size as the body text, but are bold. Also, they have no bottom margins at all. This connects them very tightly with their text.<\/p>\n

If you want more than three levels, you won’t be able to make do with just font size and margins. You will need to employ other tools:<\/p>\n

\n\"\"\n<\/div>\n

This example is in Russian, but it’s even better if you can’t read it. Just see how headings of different levels have several attributes that help you recognise them: alternating typefaces, italics, rulers, numbering.<\/p>\n

Such a complex hierarchy may be necessary in some legal documents (the example above is from the Russian Civil Code), but in most cases, three levels of headings must be enough.<\/p>\n", "summary": "It’s a common mistake to denote heading level by its font size only. The popular Bootstrap CSS framework does exactly that", "date_published": "2017-09-04T22:03:19+03:00", "date_modified": "2017-09-04T22:37:28+03:00", "tags": [ "typography" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/bootstrap-headings@2x.png", "_date_published_rfc2822": "Mon, 04 Sep 2017 22:03:19 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "292", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/bootstrap-headings@2x.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/three-level-headings@2x.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/complex-headings@2x.png" ] } }, { "id": "280", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/x-not-multiplication\/", "title": "The letter x is not a multiplication sign", "content_html": "

The letter x is not a multiplication sign. Use the times sign (×) to denote multiplication:<\/p>\n

\n\"\"\n<\/div>\n

Notice how the proper multiplication sign is aligned with other mathematical operations signs. Using x in place of × is as sloppy as using programmer’s quotes (") in place of actual quotes (“...”). Also, when you write 5x, it means 5 multiplied by x<\/i> or 5×x. Probably, not what you were trying to say.<\/p>\n", "summary": "The letter x is not a multiplication sign. Use the times sign (×) to denote multiplication", "date_published": "2017-05-29T10:18:06+03:00", "date_modified": "2017-05-29T10:17:27+03:00", "tags": [ "typography" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/multiplication@2x.png", "_date_published_rfc2822": "Mon, 29 May 2017 10:18:06 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "280", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/multiplication@2x.png" ] } }, { "id": "234", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/the-medium-typography\/", "title": "The Medium typography", "content_html": "

What confuses a heck out of me is that so many articles on design and typography are being published on Medium. Why do designers choose Medium?<\/p>\n

\n\"The\n<\/div>\n

It seems like every element has its own font, size, alignment and shade of grey. Vertical spacing is broken: the subheading is too close to the heading, the paragraphs are too far from each other.<\/p>\n

The article itself<\/a> is great though.<\/p>\n

I don’t consider myself particularly good in typography, but this?<\/p>\n

\n\"The\n<\/div>\n

It’s all random, isn’t it? And again, a great article<\/a>.<\/p>\n

(Shrug.)<\/p>\n", "summary": "What confuses a heck out of me is that so many articles on design and typography are being published on Medium", "date_published": "2016-10-24T10:55:24+03:00", "date_modified": "2016-11-03T16:00:29+03:00", "tags": [ "typography" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/medium-typography-1.jpg", "_date_published_rfc2822": "Mon, 24 Oct 2016 10:55:24 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "234", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/medium-typography-1.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/medium-typography-2.jpg" ] } }, { "id": "197", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/ellen-lupton-thinking-with-type-book\/", "title": "Ellen Lupton’s “Thinking with Type”", "content_html": "

Don’t read this book:<\/p>\n

\n\"Ellen\n<\/div>\n

The book is split into three sections: Letter, Text and Grid. This gives the illusion of structure, but don’t be fooled. This is the most disorganized book on design I have ever read.<\/p>\n

There is no narrative. Ellen jumps from topic to topic as if each spread was from a separate book. She would write about obscure InDesign hotkeys, font licensing, HTML header tags and even proofreader’s marks without any coherence. Sometimes she would pretend the reader has no idea about computers at all: did you know, she would ask, that if you press Shift+Enter instead of Enter, you would get a new line, but not a new paragraph?<\/p>\n

Ellen would explain how typeface is not the same as font. Then put a spread of some student works of questionable value. Then write half a page about “branding”. Because why not write about something, if such a thing exists<\/i>? It feels like Ellen just crammed together everything she heard about typography giving no crap as to how these random facts, thoughts and examples would help anyone get better at anything. None of the topics is given any care, many are given just a couple of paragraphs.<\/p>\n

As to author’s credibility, I have to say she thinks that a double prime (˝) is the same as dumb quotes ("). She sets HTML is small caps, but CSS is all-caps — on the same page, that is. She would also explain that CSS is Cascading Style Sheets (very helpful). At some point in the book she mentions Tufte, then tries to redesign a table and comes up with a result that shows that she either did not actually read<\/i> Tufte or completely missed the point.<\/p>\n

If you are new to design and typography, after reading the book you’ll go, wow, there’s so many stuff — I guess I will now have to find real books<\/i> to figure it all out. Well, just go straight to Tufte, Bringhurst, Tschichold and Müller-Brockmann.<\/p>\n", "summary": "Don’t read this book", "date_published": "2015-01-30T20:28:17+03:00", "date_modified": "2015-01-30T20:30:49+03:00", "tags": [ "books", "design", "rants", "reading", "typography" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/ellen-lupton-thinking-with-type-book.jpg", "_date_published_rfc2822": "Fri, 30 Jan 2015 20:28:17 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "197", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/ellen-lupton-thinking-with-type-book.jpg" ] } }, { "id": "188", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/underlines-and-descenders\/", "title": "Ideal link underlines don’t care about letter descenders", "content_html": "

Traditionally an underline was used for emphasis:<\/p>\n

\n\"Underline\n<\/div>\n

Some logos use it to look important:<\/p>\n

\n\"Some\n<\/div>\n

Above, underlines are part of the message: they interplay with the letters, drawing the readers’ attention to the underlined words.<\/p>\n

But the use of underline for links<\/i>, especially in paragraphs of text, is semantically different from this classical use. Such underline should not be an obstacle for the reader who choses not to care about the link. The design should only hint at the option to click the link, not scream about it. In fact, the words should not change their meaning the slightest when the linking is removed (i. e. when the text is printed).<\/p>\n

In Crafting link underlines on Medium<\/a>, Marcin Wichary says that an “ideal” link underline would look like this:<\/p>\n

\n\"Marcin\n<\/div>\n

But this is not ideal, this is exuberant. You don’t want to break one underline into six<\/i> stubs with funny optical effects at the gaps. You want the underline to be modest and quiet.<\/p>\n

This is not as bad as the new Safari rendering though:<\/p>\n

\n\"The\n<\/div>\n

Only four lines here, but they are thick as logs. And the vertical distance from the text is smaller than the white area around the descenders. Only a blind person could come up with this crazy design.<\/p>\n

To make the text and the underline both clear, put them in separate visual layers (see Tufte’s Envisioning Information<\/a>, Layering and Separation). Make them ignore the existence of each other:<\/p>\n

\n\"The\n<\/div>\n

Notice how this underline is very thin. It resembles a hair on a piece of paper.<\/p>\n

Why not thicker? Again, because it is not a part of the text, it should not divert the reader. It should be as thin as possible, as long as you can see it (see Tufte’s Visual Explanations<\/a>, The Smallest Effective Difference).<\/p>\n", "summary": "Traditionally an underline was used for emphasis", "date_published": "2014-12-07T17:57:04+03:00", "date_modified": "2014-12-07T18:28:58+03:00", "tags": [ "design", "typography", "web" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/underlines-ads.jpg", "_date_published_rfc2822": "Sun, 07 Dec 2014 17:57:04 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "188", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/underlines-ads.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/underlines-logos.jpg", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/underlines-wichary.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/underlines-safari.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/underlines-thin.png" ] } }, { "id": "136", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/checkmarks\/", "title": "Font check marks", "content_html": "

At Artem Gorbunov Design Bureau, we have created a set of check marks for many popular fonts:<\/p>\n

\n\n\"Font\n<\/a>
http:\/\/artgorbunov.ru\/en\/projects\/galochki\/<\/a><\/div>\n<\/div>\n

When I say “we have created” I actually mean my colleagues Artem, Michael and Ksenia, as I did not participate in this project. However, as Artem has told me, my constant moaning about the absence of good check marks prompted the idea.<\/p>\n

It is a pity that font designers do not take check marks seriously and make no effort in designing them well (if at all). These are very often needed and should be among the first non-alphanumeric characters to design for a font. Like a dollar sign or an ampersand.<\/p>\n

But now you can at least use one of ours.<\/p>\n

Best of all, it is free if you send us a link or a photo of how you use them.<\/p>\n", "summary": "At Artem Gorbunov Design Bureau, we have created a set of check marks for many popular fonts", "date_published": "2013-12-31T18:04:59+03:00", "date_modified": "2013-12-31T18:04:56+03:00", "tags": [ "design", "typography" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/checkmarks.png", "_date_published_rfc2822": "Tue, 31 Dec 2013 18:04:59 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "136", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/checkmarks.png" ] } }, { "id": "98", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/legal-all-caps\/", "title": "Dealing with legal all-caps", "content_html": "

Some lawyers think they should shout at their readers by using all-caps text — this is how they communicate the idea “this is important”. Here’s a fragment of some Apple document<\/a>:<\/p>\n

\n\"Why\n<\/div>\n

The lawyers do disservice to themselves: all-caps text is much harder to read than normal one. If you are a designer, you are responsible for this, but unfortunately changing it is often beyond your power. So here’s what you do when no one is looking:<\/p>\n

\n\"Dealing\n<\/div>\n

And all-caps becomes small-caps:<\/p>\n

\n\"Here\n<\/div>\n

The text still stands out, but it no longer looks ugly and most importantly it is noticeably easier to read. We’ve used this trick in Getwear’s terms of use<\/a> and other similar pages. See also: Typography for lawyers<\/a>.<\/p>\n", "summary": "Some lawyers think they should shout at their readers by using all-caps text — this is how they communicate the idea “this is important”", "date_published": "2013-05-16T19:56:26+03:00", "date_modified": "2013-05-21T20:34:34+03:00", "tags": [ "design", "typography" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/legal-caps-before.png", "_date_published_rfc2822": "Thu, 16 May 2013 19:56:26 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "98", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/legal-caps-before.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/legal-caps-fix.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/legal-caps-after.png" ] } } ], "_e2_version": 4269, "_e2_ua_string": "Aegea 12.0a (v4269e)" }