Онлайн-руководство по безупречной типографике
Jeremiah Shoaf уже много лет ведёт блог по типографике, и на основе своего опыта создал руководство для дизайнеров, которое поможет нам быстрее и в доступной форме понять главные принципы качественной типографики, как основы хорошего дизайна. Результат его работы — это годы усердного труда, анализа изученных материалов и постоянной практики. Это выжимка из 8 лучших книг по типографике и более 200 статей по шрифтам для web, поэтому информация актуальна как для печатников, так и для веб-дизайнеров. Руководство будет совершенствоваться и автор предоставляет пожизненный доступ к обновлениям.
Главы написаны простым и доступным языком так, что любой человек со средним знанием английского сможет разобраться. Каждая глава сопровождается иллюстрацией, и это ещё упрощает усвоение материала.
____
“Design is 95% typography.”
“Typography is graphic design’s secret club.”
As a designer, you’ve heard quotes like these before and you fully realize the importance of good typography. You’ve probably read a book or two about typography and skimmed through hundreds of random online articles. Maybe you even took a class back in college. But how confident are you that you actually remember all of the complex typography rules and best practices you’ve learned over the years?
To deal with this issue in the past, I’ve always referenced a scattered mess of sources: a few go-to books on my bookshelf, a Google doc full of random typography tips I’ve learned, a massive collection of bookmarked articles and web resources, and finally, a mental list of type rules floating around inside my head. On every design project, I would browse through these sources and hope that I was remembering all the key tenets of creating beautiful and functional typography.
I would end up overlooking things that I had learned years ago (and instead focus on using pretty typefaces and colors). My typography suffered. This common problem is probably why the web is still plagued by poor type, even in the year 2017 when designers should know better.
What I really needed was a single, definitive resource that covered everything about typography—from punctuation rules to pairing typefaces. Something that I could quickly review against on every project. Nothing like that existed, so I set out to create it…
I ordered a stack of typography books from Amazon and re-read the handful of books already on my shelf. I took meticulous notes on every piece of practical advice I could find. As it’s not possible for printed books to keep up with the latest in web typography, I hit up Google and did a search on everything related to setting type on screens. I added over two hundred articles to a spreadsheet and individually reviewed each one. I added additional notes incorporating every tip and trick I’ve learned from reviewing hundreds of typographic designs on Typewolf over the past three years.
After weeks of organizing pages and pages of notes, I began the long process of consolidating everything into a single resource. I had originally planned on making this into an online course but I wanted something that could be easily referred back to later. I eventually came up with the concept of an interactive checklist where each checklist item could be expanded to reveal more in-depth details. This would allow the best of both worlds—expand all of the checklist items to read it straight through as a complete course on typography or collapse the items and check them off, only expanding when you need more details.
The end result is the Flawless Typography Checklist. Over a year in the making, it’s the biggest project I’ve ever worked on in my entire life. It consolidates absolutely everything there is to know about typography in one place. It’s the most comprehensive resource on typography available—online or in print. Read it straight through as a complete master course or use it as a tool on every design project to guarantee your typography will always be flawless.
Everything there is to know about typography gathered in one place
As a designer, you’ve probably read a book or two about typography and skimmed through hundreds of online articles. But how do you keep track of all the complex typography rules, tips and best practices that you’ve read over the years? To solve this problem, I’ve created the Flawless Typography Checklist.
Over a year in the making, this interactive checklist covers everything there is to know about typography. To create it, I read eight typography books and over two hundred articles, taking meticulous notes on every practical tip I could find. It includes everything I’ve learned from reviewing hundreds of typographic designs on Typewolf over the past three years. This is the most comprehensive resource on typography available—online or in print. Read it straight through as a complete master course or use it as a tool on every design project to guarantee your typography will always be flawless.
Most websites have paragraph line lengths that are way too long to read comfortably. Probably the majority of sites I feature on Typewolf suffer from this problem. This is especially true on responsive designs where text reflows to match the viewport window.
You should tweak your CSS at different breakpoints with the aim of keeping your line length under 75 characters. It’s not possible to have a perfect 66-character line at every screen width and that is totally fine. In my opinion, going slightly over 75 characters usually doesn’t pose too much of a problem. Reading really starts to degrade once you hit 100 characters per line and it’s not uncommon to see websites using 300+ characters per line. Wikipedia is a prime example—try reading an article on their site in a full-width browser window and you will quickly see how difficult it is for your eye to jump from one line to the next.
“The 66-character line (counting both letters and spaces) is widely regarded as ideal.”Robert Bringhurst, The Elements of Typographic Style
20. Use only regular, normal, book or medium weights for body text
System fonts typically are only available in regular and bold, however, Google Fonts has now made font families with a huge range of weights available to the masses. Source Sans Pro, Roboto, Open Sans, Raleway and Lato all come to mind. These days, it’s common to see websites using weights for body text, such as 100, 200 and 300, that were not designed with longform reading in mind.
The 100 weight of Roboto may look refined and delicate on your machine, but on other computers, it can be completely unreadable. Antialiasing varies from system to system and from browser to browser. On Retina screens especially, the lighter weights can appear very faint. A safe rule of thumb is to only set body text with regular, normal, book or, in some cases, medium. In CSS, this corresponds to a weight of 400 or 500.
This isn’t to say that 100, 200 and 300 weights aren’t useful—they certainly are, but not for setting body text. Use the lighter weights for headlines, lead paragraphs and other type set at large sizes.
21. Never set body text with a display face
Playfair Display is a beautiful open-source typeface, but under no circumstances should it be used to set body text. Typefaces with Display in their name are designed specifically for display usage at large sizes. At body text sizes, they become extremely uncomfortable to read.
Display faces tend to have higher stroke contrast, tighter spacing and more intricate details, while text faces have simplified features, more even stroke contrast and looser spacing. Text faces are more boring but are comfortable to read. Display faces are designed to attract attention and create emotion, which isn’t what you want for longform reading.
“When searching for good options for long-form text, we need to recognize that we’re asking someone to live with this typeface for an extended period of time. Every eccentricity is amplified when used page after page.”Jason Santa Maria, On Web Typography
37. Use small caps when available but avoid pseudo small caps
Small caps are capital letters that are specially designed to be used within running text. Their cap height is equal to (or a little taller than) the x-height of the lowercase letters. Small caps create a better reading experience compared to regular uppercase letters because they blend in and flow with the rest of the text. Regular uppercase letters jump out and yell, creating undue emphasis on words such as acronyms.
Pseudo small caps are fake small caps that are automatically generated by the browser. Real small caps aren’t simply capital letters that are scaled-down—instead, type designers create them from the ground up to match the weight and proportions of the lowercase. If you try to apply small caps to a font that doesn’t include them, ugly pseudo small caps will be the result.
Small caps are either built into font files as OpenType features or else included in a separate small caps font file. Loading a separate font file just to implement small caps may not be worth it on the web. I tend to only use OpenType small caps on my sites. This is the CSS code that I use (it will transform both lowercase and uppercase letters into proper small caps, which is usually what you want):
Код:
.small-caps {
-moz-font-feature-settings: "c2sc", "smcp";
-ms-font-feature-settings: "c2sc", "smcp";
-webkit-font-feature-settings: "c2sc", "smcp";
font-feature-settings: "c2sc", "smcp";
letter-spacing: 0.05em;
}
“Software creates pseudo small caps by shrinking down normal caps to the approximate x-height; the resulting letters look starved and sickly because their weights don’t match that of their brethren.”Ellen Lupton, Type on Screen
52. Consider changing your headlines to a non-display face on small screens
Adisplay face can look dramatic when set at a large size on desktop screens, however, when that same typeface is viewed on a smaller mobile screen, it can quickly become illegible. Display typefaces feature delicate strokes that appear elegant at large sizes but cause letters to break apart at small sizes.
If you are already loading both text and display versions of a webfont family, then there is no harm in swapping out the display version for the text version on mobile. In your CSS, simply use a media query to set the text version as the headline font family on small screens. Your mobile readers will thank you.
73. To find typefaces that harmonize, consider whether they appear handwritten or constructed
Pairing typefaces that “harmonize” isn’t super practical advice, so I wanted to go into a little more detail about what exactly that means. The easiest way to find harmony is to consider whether a typeface appears mechanically constructed or written by a human hand.
Futura and Bodoni are often mentioned in typography books as a classic pairing, so I will use those two typefaces in this example. But before we try pairing Futura with Bodoni, let’s try comparing Futura to Garamond…
Futura is a geometric sans-serif, so its forms are based off circles. It looks like someone constructed it using a protractor. Garamond, on the other hand, is a humanist serif and looks like someone drew it by hand. Garamond feels organic while Futura feels precise. The oval inside the o of Garamond sits at an angle, which mimics a hand holding a pen at an angle, while the o of Futura sits perfectly upright and straight. This angle is known as the stressof a typeface.
Let’s now compare Futura to Bodoni, which is a Modern or Rational serif. Notice how Bodoni has a perfectly vertical stress just like Futura. This vertical stress makes the letterforms appear exact and symmetrical. These shared characteristics reminiscent of mechanical construction create harmony between the two typefaces. Use this concept of constructed versus handwritten to guide you in finding harmonious pairings.
92. Tighten your line height in headlines
The standard line height of 1.5 is considered ideal for setting body text, however, for headlines and other large type, it is way too much. It’s common to see sites that use 1.5 across the board for all type, which leads to headlines with huge gaps between the lines.
The larger that type is set, the less of a line height it needs. Begin with a line height of 1.0 and work your way up from there until your headlines look good. There shouldn’t be a large gap between lines but neither should the spacing be so tight that the ascenders and descenders touch.
“A short burst of advertising copy or a title might be set with negative leading, so long as the ascenders and descenders don’t collide.”Robert Bringhurst, The Elements of Typographic Style
94. Use a lead paragraph to begin an article
Alead paragraph is a short paragraph set in a larger font size that opens an article. The purpose of a lead paragraph is to give the reader a quick summary of the story and provide a hook to entice further reading.
Lead paragraphs are useful on the web, as they give readers a bite-sized overview that is easily shareable. It’s common for people to share articles without fully reading them, so a lead can be helpful for those in a hurry. Stylistically, leads are usually set in a larger font size or given a different type treatment, such as bold or italic, to make them contrast with the paragraphs that follow.
Скрытое содержимое.
У автора на сайте ещё много вкусняшек, достойных внимания )
О сайте
Скрытое содержимое.
Скрытое содержимое.
Суть курсаJeremiah Shoaf уже много лет ведёт блог по типографике, и на основе своего опыта создал руководство для дизайнеров, которое поможет нам быстрее и в доступной форме понять главные принципы качественной типографики, как основы хорошего дизайна. Результат его работы — это годы усердного труда, анализа изученных материалов и постоянной практики. Это выжимка из 8 лучших книг по типографике и более 200 статей по шрифтам для web, поэтому информация актуальна как для печатников, так и для веб-дизайнеров. Руководство будет совершенствоваться и автор предоставляет пожизненный доступ к обновлениям.
Главы написаны простым и доступным языком так, что любой человек со средним знанием английского сможет разобраться. Каждая глава сопровождается иллюстрацией, и это ещё упрощает усвоение материала.
____
“Design is 95% typography.”
“Typography is graphic design’s secret club.”
As a designer, you’ve heard quotes like these before and you fully realize the importance of good typography. You’ve probably read a book or two about typography and skimmed through hundreds of random online articles. Maybe you even took a class back in college. But how confident are you that you actually remember all of the complex typography rules and best practices you’ve learned over the years?
To deal with this issue in the past, I’ve always referenced a scattered mess of sources: a few go-to books on my bookshelf, a Google doc full of random typography tips I’ve learned, a massive collection of bookmarked articles and web resources, and finally, a mental list of type rules floating around inside my head. On every design project, I would browse through these sources and hope that I was remembering all the key tenets of creating beautiful and functional typography.
I would end up overlooking things that I had learned years ago (and instead focus on using pretty typefaces and colors). My typography suffered. This common problem is probably why the web is still plagued by poor type, even in the year 2017 when designers should know better.
What I really needed was a single, definitive resource that covered everything about typography—from punctuation rules to pairing typefaces. Something that I could quickly review against on every project. Nothing like that existed, so I set out to create it…
I ordered a stack of typography books from Amazon and re-read the handful of books already on my shelf. I took meticulous notes on every piece of practical advice I could find. As it’s not possible for printed books to keep up with the latest in web typography, I hit up Google and did a search on everything related to setting type on screens. I added over two hundred articles to a spreadsheet and individually reviewed each one. I added additional notes incorporating every tip and trick I’ve learned from reviewing hundreds of typographic designs on Typewolf over the past three years.
After weeks of organizing pages and pages of notes, I began the long process of consolidating everything into a single resource. I had originally planned on making this into an online course but I wanted something that could be easily referred back to later. I eventually came up with the concept of an interactive checklist where each checklist item could be expanded to reveal more in-depth details. This would allow the best of both worlds—expand all of the checklist items to read it straight through as a complete course on typography or collapse the items and check them off, only expanding when you need more details.
The end result is the Flawless Typography Checklist. Over a year in the making, it’s the biggest project I’ve ever worked on in my entire life. It consolidates absolutely everything there is to know about typography in one place. It’s the most comprehensive resource on typography available—online or in print. Read it straight through as a complete master course or use it as a tool on every design project to guarantee your typography will always be flawless.
Everything there is to know about typography gathered in one place
- Covers absolutely everything—punctuation rules, body text best practices, typeface pairing, branding tips and much, much more
- Includes one hundred checklist items organized into six sections—quickly navigate the checklist via a sleek set of keyboard controls
- Each checklist item includes a detailed description, a visual example demonstrating the principle and additional tips (and often a relevant quote from a typography book)
- Save hours of time—no need to pick up that dusty typography book sitting on your shelf or aimlessly search Google—everything you need is right here at your fingertips
- If you are like most designers, then you learn best by looking at visual examples rather than reading dense paragraphs—each typography principle includes a large image that clearly demonstrates the concept
- Includes every actionable tip distilled from eight of the most well-regarded books on typography
- Printed books can’t keep up with the latest best practices in web typography, so this product also includes current information from over two hundred online articles (and will be continuously updated to make sure everything stays up-to-date)
- You can probably recognize a site that has nice typography but you might not know exactly why—in the Design & Branding section, I deconstruct what makes type-driven designs effective
- I’ve reviewed hundreds of typographic designs on Typewolf over the past three years—every tip and trick I’ve learned is collected here
- My goal was to make this product more comprehensive than any college-level course on typography
- This is the only educational resource on typography you will ever need—there is nothing out there that is more thorough and exhaustive, either online or in print
- Read this from start to finish and you will know more about typography than 99% of designers
- Check off items as you complete them—the percentage bar will tick up showing how close you are to achieving flawless typography
- The checklist will remember your checked items so you can pick up where you left off
- Collapse and expand checklist items for more in-depth details and to see visual examples demonstrating the principles
- Use the numbers on your keyboard to quickly navigate the checklist
- Includes comprehensive coverage on using cutting-edge OpenType features such as small caps, standard and discretionary ligatures, tabular figures, lining figures, oldstyle figures and swashes
- The Typeface Selection & Pairing section is the part of this product that I am the most proud of—I believe it is the clearest guide to pairing typefaces in existence and is worth the price of the product alone
- Almost all typeface pairing guides that I’ve read are full of vague, ambiguous advice such as “seek out harmonious proportions”—I’ve put together a clear, straightforward system that anyone can use to find typefaces that pair well together
- Includes a cheatsheet that shows exactly how to pair 180 of the most popular typefaces used by designers
- I will be actively updating and improving this product so it will always be the most up-to-date resource on typography available
- I’ll be using this tool myself on every design project for years to come
- Putting this together is the biggest project I’ve ever worked on in my entire life—I’ve poured over every tiny detail and it includes an OCD-level of comprehensiveness
- I’ll gladly refund your money if you are at all unhappy with the product
- Become the type expert on your design team who knows everything about typography—after reading this, you’ll know more about typography than 99% of designers
- Integrate this tool into your workflow to ensure you will have flawless typography on every design project for years to come
As a designer, you’ve probably read a book or two about typography and skimmed through hundreds of online articles. But how do you keep track of all the complex typography rules, tips and best practices that you’ve read over the years? To solve this problem, I’ve created the Flawless Typography Checklist.
Over a year in the making, this interactive checklist covers everything there is to know about typography. To create it, I read eight typography books and over two hundred articles, taking meticulous notes on every practical tip I could find. It includes everything I’ve learned from reviewing hundreds of typographic designs on Typewolf over the past three years. This is the most comprehensive resource on typography available—online or in print. Read it straight through as a complete master course or use it as a tool on every design project to guarantee your typography will always be flawless.
15. Keep your line length between 45 and 75 characters (66 is ideal)
Most websites have paragraph line lengths that are way too long to read comfortably. Probably the majority of sites I feature on Typewolf suffer from this problem. This is especially true on responsive designs where text reflows to match the viewport window.
You should tweak your CSS at different breakpoints with the aim of keeping your line length under 75 characters. It’s not possible to have a perfect 66-character line at every screen width and that is totally fine. In my opinion, going slightly over 75 characters usually doesn’t pose too much of a problem. Reading really starts to degrade once you hit 100 characters per line and it’s not uncommon to see websites using 300+ characters per line. Wikipedia is a prime example—try reading an article on their site in a full-width browser window and you will quickly see how difficult it is for your eye to jump from one line to the next.
“The 66-character line (counting both letters and spaces) is widely regarded as ideal.”Robert Bringhurst, The Elements of Typographic Style
20. Use only regular, normal, book or medium weights for body text
System fonts typically are only available in regular and bold, however, Google Fonts has now made font families with a huge range of weights available to the masses. Source Sans Pro, Roboto, Open Sans, Raleway and Lato all come to mind. These days, it’s common to see websites using weights for body text, such as 100, 200 and 300, that were not designed with longform reading in mind.
The 100 weight of Roboto may look refined and delicate on your machine, but on other computers, it can be completely unreadable. Antialiasing varies from system to system and from browser to browser. On Retina screens especially, the lighter weights can appear very faint. A safe rule of thumb is to only set body text with regular, normal, book or, in some cases, medium. In CSS, this corresponds to a weight of 400 or 500.
This isn’t to say that 100, 200 and 300 weights aren’t useful—they certainly are, but not for setting body text. Use the lighter weights for headlines, lead paragraphs and other type set at large sizes.
21. Never set body text with a display face
Playfair Display is a beautiful open-source typeface, but under no circumstances should it be used to set body text. Typefaces with Display in their name are designed specifically for display usage at large sizes. At body text sizes, they become extremely uncomfortable to read.
Display faces tend to have higher stroke contrast, tighter spacing and more intricate details, while text faces have simplified features, more even stroke contrast and looser spacing. Text faces are more boring but are comfortable to read. Display faces are designed to attract attention and create emotion, which isn’t what you want for longform reading.
“When searching for good options for long-form text, we need to recognize that we’re asking someone to live with this typeface for an extended period of time. Every eccentricity is amplified when used page after page.”Jason Santa Maria, On Web Typography
37. Use small caps when available but avoid pseudo small caps
Small caps are capital letters that are specially designed to be used within running text. Their cap height is equal to (or a little taller than) the x-height of the lowercase letters. Small caps create a better reading experience compared to regular uppercase letters because they blend in and flow with the rest of the text. Regular uppercase letters jump out and yell, creating undue emphasis on words such as acronyms.
Pseudo small caps are fake small caps that are automatically generated by the browser. Real small caps aren’t simply capital letters that are scaled-down—instead, type designers create them from the ground up to match the weight and proportions of the lowercase. If you try to apply small caps to a font that doesn’t include them, ugly pseudo small caps will be the result.
Small caps are either built into font files as OpenType features or else included in a separate small caps font file. Loading a separate font file just to implement small caps may not be worth it on the web. I tend to only use OpenType small caps on my sites. This is the CSS code that I use (it will transform both lowercase and uppercase letters into proper small caps, which is usually what you want):
Код:
.small-caps {
-moz-font-feature-settings: "c2sc", "smcp";
-ms-font-feature-settings: "c2sc", "smcp";
-webkit-font-feature-settings: "c2sc", "smcp";
font-feature-settings: "c2sc", "smcp";
letter-spacing: 0.05em;
}
“Software creates pseudo small caps by shrinking down normal caps to the approximate x-height; the resulting letters look starved and sickly because their weights don’t match that of their brethren.”Ellen Lupton, Type on Screen
52. Consider changing your headlines to a non-display face on small screens
Adisplay face can look dramatic when set at a large size on desktop screens, however, when that same typeface is viewed on a smaller mobile screen, it can quickly become illegible. Display typefaces feature delicate strokes that appear elegant at large sizes but cause letters to break apart at small sizes.
If you are already loading both text and display versions of a webfont family, then there is no harm in swapping out the display version for the text version on mobile. In your CSS, simply use a media query to set the text version as the headline font family on small screens. Your mobile readers will thank you.
73. To find typefaces that harmonize, consider whether they appear handwritten or constructed
Pairing typefaces that “harmonize” isn’t super practical advice, so I wanted to go into a little more detail about what exactly that means. The easiest way to find harmony is to consider whether a typeface appears mechanically constructed or written by a human hand.
Futura and Bodoni are often mentioned in typography books as a classic pairing, so I will use those two typefaces in this example. But before we try pairing Futura with Bodoni, let’s try comparing Futura to Garamond…
Futura is a geometric sans-serif, so its forms are based off circles. It looks like someone constructed it using a protractor. Garamond, on the other hand, is a humanist serif and looks like someone drew it by hand. Garamond feels organic while Futura feels precise. The oval inside the o of Garamond sits at an angle, which mimics a hand holding a pen at an angle, while the o of Futura sits perfectly upright and straight. This angle is known as the stressof a typeface.
Let’s now compare Futura to Bodoni, which is a Modern or Rational serif. Notice how Bodoni has a perfectly vertical stress just like Futura. This vertical stress makes the letterforms appear exact and symmetrical. These shared characteristics reminiscent of mechanical construction create harmony between the two typefaces. Use this concept of constructed versus handwritten to guide you in finding harmonious pairings.
92. Tighten your line height in headlines
The standard line height of 1.5 is considered ideal for setting body text, however, for headlines and other large type, it is way too much. It’s common to see sites that use 1.5 across the board for all type, which leads to headlines with huge gaps between the lines.
The larger that type is set, the less of a line height it needs. Begin with a line height of 1.0 and work your way up from there until your headlines look good. There shouldn’t be a large gap between lines but neither should the spacing be so tight that the ascenders and descenders touch.
“A short burst of advertising copy or a title might be set with negative leading, so long as the ascenders and descenders don’t collide.”Robert Bringhurst, The Elements of Typographic Style
94. Use a lead paragraph to begin an article
Alead paragraph is a short paragraph set in a larger font size that opens an article. The purpose of a lead paragraph is to give the reader a quick summary of the story and provide a hook to entice further reading.
Lead paragraphs are useful on the web, as they give readers a bite-sized overview that is easily shareable. It’s common for people to share articles without fully reading them, so a lead can be helpful for those in a hurry. Stylistically, leads are usually set in a larger font size or given a different type treatment, such as bold or italic, to make them contrast with the paragraphs that follow.
Об авторе
Скрытое содержимое.
У автора на сайте ещё много вкусняшек, достойных внимания )
О сайте
Скрытое содержимое.
Продажник
Скрытое содержимое.