Tag Archives: typography

Thumbnail

A Reference Guide For Typography In Mobile Web Design




A Reference Guide For Typography In Mobile Web Design

Suzanna Scacca



With mobile taking a front seat in search, it’s important that websites are designed in a way that prioritize the best experience possible for their users. While Google has brought attention to elements like pop-ups that might disrupt the mobile experience, what about something as seemingly simple as choice of typography?

The answer to the typography question might seem simple enough: what works on desktop should work on mobile so long as it scales well. Right?

While that would definitely make it a lot easier on web designers, that’s not necessarily the case. The problem in making that statement a decisive one is that there haven’t been a lot of studies done on the subject of mobile typography in recent years. So, what I intend to do today is give a brief summary of what it is we know about typography in web design, and then see what UX experts and tests have been able to reveal about using typography for mobile.

Understanding The Basics Of Typography In Modern Web Design

Look, I know typography isn’t the most glamorous of subjects. And, being a web designer, it might not be something you spend too much time thinking about, especially if clients bring their own style guides to you prior to beginning a project.

That said, with mobile-first now here, typography requires additional consideration.

Typography Terminology

Let’s start with the basics: terminology you’ll need to know before digging into mobile typography best practices.

Typography: This term refers to the technique used in styling, formatting, and arranging “printed” (as opposed to handwritten) text.

Typeface: This is the classification system used to label a family of characters. So, this would be something like Arial, Times New Roman, Calibri, Comic Sans, etc.

Typefaces in Office 365


A typical offering of typefaces in word processing applications. (Source: Google Docs) (Large preview)

Font: This drills down further into a website’s typeface. The font details the typeface family, point size, and any special stylizations applied. For instance, 11-point Arial in bold.

3 essential elements to define a font


An example of the three elements that define a font. (Source: Google Docs) (Large preview)

Size: There are two ways in which to refer to the size (or height) of a font: the word processing size in points or the web design size in pixels. For the purposes of talking about mobile web design, we use pixels.

Here is a line-by-line comparison of various font sizes:

An example of font sizes


An example of how the same string of text appears at different sizes. (Source: Google Docs) (Large preview)

As you can see in WordPress, font sizes are important when it comes to establishing hierarchy in header text:

An example of font size choices in WordPress


Header size defaults available with a WordPress theme. (Source: WordPress) (Large preview)

Weight: This is the other part of defining a typeface as a font. Weight refers to any special styles applied to the face to make it appear heavier or lighter. In web design, weight comes into play in header fonts that complement the typically weightless body text.

Here is an example of options you could choose from in the WordPress theme customizer:

An example of font weight choices


Sample font weights available with a WordPress theme. (Source: WordPress) (Large preview)

Kerning: This pertains to the space between two letters. It can be adjusted in order to create a more aesthetically pleasing result while also enhancing readability. You will need a design software like Photoshop to make these types of adjustments.

Tracking: Tracking, or letter-spacing, is often confused with kerning as it too relates to adding space in between letters. However, whereas kerning adjusts spacing between two letters in order to improve appearances, tracking is used to adjust spacing across a line. This is used more for the purposes of fixing density issues while reading.

To give you a sense for how this differs, here’s an example from Mozilla on how to use tracking to change letter-spacing:

Normal tracking example


This is what normal tracking looks like. (Source: Mozilla) (Large preview)

-1px tracking example


This is what (tighter) -1px tracking looks like. (Source: Mozilla) (Large preview)

1px tracking example


This is what (looser) 1px tracking looks like. (Source: Mozilla) (Large preview)

Leading: Leading, or line spacing, is the amount of distance granted between the baselines of text (the bottom line upon which a font rests). Like tracking, this can be adjusted to fix density issues.

If you’ve been using word processing software for a while, you’re already familiar with leading. Single-spaced text. Double-spaced text. Even 1.5-spaced text. That’s leading.

The Role Of Typography In Modern Web Design

As for why we care about typography and each of the defining characteristics of it in modern web design, there’s a good reason for it. While it would be great if a well-written blog post or super convincing sales jargon on a landing page were enough to keep visitors happy, that’s not always the case. The choices you make in terms of typography can have major ramifications on whether or not people even give your site’s copy a read.

These are some of the ways in which typography affects your end users:

Reinforce Branding
Typography is another way in which you create a specific style for your web design. If images all contain clean lines and serious faces, you would want to use an equally buttoned-up typeface.

Set the Mood
It helps establish a mood or emotion. For instance, a more frivolous and light-bodied typeface would signal to users that the brand is fun, young and doesn’t take itself seriously.

Give It a Voice
It conveys a sense of personality and voice. While the actual message in the copy will be able to dictate this well, using a font that reinforces the tone would be a powerful choice.

Encourage Reading
As you can see, there are a number of ways in which you can adjust how type appears on a screen. If you can give it the right sense of speed and ease, you can encourage more users to read through it all.

Allow for Scanning
Scanning or glancing (which I’ll talk about shortly) is becoming more and more common as people engage with the web on their smart devices. Because of this, we need ways to format text to improve scannability and this usually involves lots of headers, pull quotes and in-line lists (bulleted, numbered, etc.).

Improve Accessibility
There is a lot to be done in order to design for accessibility. Your choice of font plays a big part in that, especially as the mobile experience has to rely less on big, bold designs and swatches of color and more on how quickly and well you can get visitors to your message.

Because typography has such a diverse role in the user experience, it’s a matter that needs to be taken seriously when strategizing new designs. So, let’s look at what the experts and tests have to say about handling it for mobile.

Typography For Mobile Web Design: What You Need To Know

Too small, too light, too fancy, too close together… You can run into a lot of problems if you don’t strike the perfect balance with your choice of typography in design. On mobile, however, it’s a bit of a different story.

I don’t want to say that playing it safe and using the system default from Google or Apple is the way to go. After all, you work so hard to develop unique, creative and eye-catching designs for your users. Why would you throw in the towel at this point and just slap Roboto all over your mobile website?

We know what the key elements are in defining and shaping a typeface and we also know how powerful fonts are within the context of a website. So, let’s drill down and see what exactly you need to do to make your typography play well with mobile.

1. Size

In general, the rule of thumb is that font size needs to be 16 pixels for mobile websites. Anything smaller than that could compromise readability for visually impaired readers. Anything too much larger could also make reading more difficult. You want to find that perfect Goldilocks formula and, time and time again, it comes back to 16 pixels.

In general, that rule is a safe one to play by when it comes to the main body text of your mobile website. However, what exactly are you allowed to do for header text? After all, you need to be able to distinguish your main headlines from the rest of the text. Not just for the sake of calling attention to bigger messages, but also for the purposes of increasing scannability of a mobile web page.

The Nielsen Norman Group reported on a study from MIT that covered this exact question. What can you do about text that users only have to glance at? In other words, what sort of sizing can you use for short strings of header text?

Here is what they found:

Short, glanceable strings of text lead to faster reading and greater comprehension when:

  • They are larger in size (specifically, 4mm as opposed to 3mm).
  • They are in all caps.
  • Lettering width is regular (and not condensed).

In sum:

Lowercase lettering required 26% more time for accurate reading than uppercase, and condensed text required 11.2% more time than regular. There were also significant interaction effects between case and size, suggesting that the negative effects of lowercase letters are exacerbated with small font sizes.

I’d be interested to see how the NerdWallet website does, in that case. While I do love the look of this, they have violated a number of these sizing and styling suggestions:

The NerdWallet home page


NerdWallet’s use of all-caps and smaller font sizes on mobile. (Source: NerdWallet) (Large preview)

Having looked at this a few times now, I do think the choice of a smaller-sized font for the all-caps header is an odd choice. My eyes are instantly drawn to the larger, bolder text beneath the main header. So, I think there is something to MIT’s research.

Flywheel Sports, on the other hand, does a great job of exemplifying this point.

The Flywheel Sports home page


Flywheel Sports’ smart font choices for mobile. (Source: Flywheel Sports) (Large preview)

There’s absolutely no doubt where the visitors’ attention needs to go: to the eye-catching header. It’s in all caps, it’s larger than all the other text on the page, and, although the font is incredibly basic, its infusion with a custom handwritten-style type looks really freaking cool here. I think the only thing I would fix here is the contrast between the white and yellow fonts and the blue background.

Just remember: this only applies to the sizing (and styling) of header text. If you want to keep large bodies of text readable, stick to the aforementioned sizing best practices.

2. Color and Contrast

Color, in general, is an important element in web design. There’s a lot you can convey to visitors by choosing the right color palette for designs, images and, yes, your text. But it’s not just the base color of the font that matters, it’s also the contrast between it and the background on which it sits (as evidenced by my note above about Flywheel Sports).

For some users, a white font on top of a busy photo or a lighter background may not pose too much of an issue. But “too much” isn’t really acceptable in web design. There should be no issues users encounter when they read text on a website, especially from an already compromised view of it on mobile.

Which is why color and contrast are top considerations you have to make when styling typography for mobile.

The Web Content Accessibility Guidelines (WCAG) has clear recommendations regarding how to address color contrast in section 1.4.3. At a minimum, the WCAG suggests that a contrast of 4.5 to 1 should be established between the text and background for optimal readability. There are a few exceptions to the rule:

  • Text sized using 18-point or a bold 14-point only needs a contrast of 3 to 1.
  • Text that doesn’t appear in an active part of the web page doesn’t need to abide by this rule.
  • The contrast of text within a logo can be set at the designer’s discretion.

If you’re unsure of how to establish that ratio between your font’s color and the background upon which it sits, use a color contrast checking tool like WebAIM.

WebAIM color contrast checker


An example of how to use the WebAIM color contrast checker tool. (Source: WebAIM) (Large preview)

The one thing I would ask you to be mindful of, however, is using opacity or other color settings that may compromise the color you’ve chosen. While the HEX color code will check out just fine in the tool, it may not be an accurate representation of how the color actually displays on a mobile device (or any screen, really).

To solve this problem and ensure you have a high enough contrast for your fonts, use a color eyedropper tool built into your browser like the ones for Firefox or Chrome. Simply hover the eyedropper over the color of the background (or font) on your web page, and let it tell you what the actual color code is now.

Here is an example of this in action: Dollar Shave Club.

This website has a rotation of images in the top banner of the home page. The font always remains white, but the background rotates.

Dollar Shave Club grey banner


Dollar Shave Club’s home page banner with a grey background. (Source: Dollar Shave Club) (Large preview)

Dollar Shave Club beige banner


Dollar Shave Club’s home page banner with a beige/taupe background. (Source: Dollar Shave Club) (Large preview)

Dollar Shave Club purple banner


Dollar Shave Club’s home page banner with a purple background. (Source: Dollar Shave Club) (Large preview)

Based on what we know now, the purple is probably the only one that will pass with flying colors. However, for the purposes of showing you how to work through this exercise, here is what the eyedropper tool says about the HEX color codes for each of the backgrounds:

  • Grey: #9a9a9a
  • Beige/taupe: #ffd0a8
  • Purple: #4c2c59.

Here is the contrast between these colors and the white font:

  • Grey: 2.81 to 1
  • Beige/taupe: 1.42 to 1
  • Purple: 11.59 to 1.

Clearly, the grey and beige backgrounds are going to lend themselves to a very poor experience for mobile visitors.

Also, if I had to guess, I’d say that “Try a risk-free Starter Set now.” is only a 10-point font (which is only about 13 pixels). So, the size of the font is also working against the readability factor, not to mention the poor choice of colors used with the lighter backgrounds.

The lesson here is that you should really make some time to think about how color and contrast of typography will work for the benefit of your readers. Without these additional steps, you may unintentionally be preventing visitors from moving forward on your site.

3. Tracking

Plain and simple: tracking in mobile web design needs to be used in order to control density. The standard recommendation is that there be no more than between 30 and 40 characters to a line. Anything more or less could affect readability adversely.

While it does appear that Dove is pushing the boundaries of that 40-character limit, I think this is nicely done.

The Dove home page


Dove’s use of even tracking and (mostly) staying within the 40-character limit. (Source: Dove) (Large preview)

The font is so simple and clean, and the tracking is evenly spaced. You can see that, by keeping the amount of words on a line relegated to the recommended limits, it gives this segment of the page the appearance that it will be easy to read. And that’s exactly what you want your typography choices to do: to welcome visitors to stop for a brief moment, read the non-threatening amount of text, and then go on their way (which, hopefully, is to conversion).

4. Leading

According to the NNG, content that appears above the fold on a 30-inch desktop monitor equates to five swipes on a 4-inch mobile device. Granted, this data is a bit old as most smartphones are now between five and six inches:

Average smartphone screen sizes


Average smartphone screen sizes from 2015 to 2021. (Source: TechCrunch) (Large preview)

Even so, let’s say that equates to three or four good swipes of the smartphone screen to get to the tip of the fold on desktop. That’s a lot of work your mobile visitors have to do to get to the good stuff. It also means that their patience will already be wearing thin by the time they get there. As the NNG pointed out, a mobile session, on average, usually lasts about only 72 seconds. Compare that to desktop at 150 seconds and you can see why this is a big deal.

This means two things for you:

  1. You absolutely need to cut out the excess on mobile. If this means creating a completely separate and shorter set of content for mobile, do it.
  2. Be very careful with leading.

You’ve already taken care to keep optimize your font size and width, which is good. However, too much leading and you could unintentionally be asking users to scroll even more than they might have to. And with every scroll comes the possibility of fatigue, boredom, frustration, or distraction getting in the way.

So, you need to strike a good balance here between using line spacing to enhance readability while also reigning in how much work they need to do to get to the bottom of the page.

The Hill Holliday website isn’t just awesome inspiration on how to get a little “crazy” with mobile typography, but it also has done a fantastic job in using leading to make larger bodies of text easier to read:

The Hill Holliday home page


Hill Holliday uses the perfect ratio of leading between lines and paragraphs. (Source: Hill Holliday) (Large preview)

Different resources will give you different guidelines on how to create spacing for mobile devices. I’ve seen suggestions for anywhere between 120% to 150% of the font’s point size. Since you also need to consider accessibility when designing for mobile, I’m going to suggest you follow WCAG’s guidelines:

  • Spacing between lines needs to be 1.5 (or 150%, whichever ratio works for you).
  • Spacing between paragraphs then needs to be 2.5 (or 250%).

At the end of the day, this is about making smart decisions with the space you’re given to work with. If you only have a minute to hook them, don’t waste it with too much vertical space. And don’t turn them off with too little.

5. Acceptable Fonts

Before I break down what makes for an acceptable font, I want to first look at what Android’s and Apple’s typeface defaults are. I think there’s a lot we can learn just by looking at these choices:

Android
Google uses two typefaces for its platforms (both desktop and mobile): Roboto and Noto. Roboto is the primary default. If a user visits a website in a language that doesn’t accept Roboto, then Noto is the secondary backup.

This is Roboto:

The Roboto character set


A snapshot of the Roboto character set. (Source: Roboto) (Large preview)

It’s also important to note that Roboto has a number of font families to choose from:

The Roboto families


Other options of Roboto fonts to choose from. (Source: Roboto) (Large preview)

As you can see, there are versions of Roboto with condensed kerning, a heavier and serifed face as well as a looser, serif-like option. Overall, though, this is just a really clean and simply stylized typeface. You’re not likely to stir up any real emotions when using this on a website, and it may not convey much of a personality, but it’s a safe, smart choice.

Apple
Apple has its own set of typography guidelines for iOS along with its own system typeface: San Francisco.

The San Francisco font


The San Francisco font for Apple devices. (Source: San Francisco) (Large preview)

For the most part, what you see is what you get with San Francisco. It’s just a basic sans serif font. If you look at Apple’s recommended suggestions on default settings for the font, you’ll also find it doesn’t even recommend using bold stylization or outlandish sizing, leading or tracking rules:

San Francisco default settings


Default settings and suggestions for the San Francisco typeface. (Source: San Francisco) (Large preview)

Like with pretty much everything else Apple does, the typography formula is very basic. And, you know what? It really works. Here it is in action on the Apple website:

The Apple home page


Apple makes use of its own typography best practices. (Source: Apple) (Large preview)

Much like Google’s system typeface, Apple has gone with a simple and classic typeface. While it may not help your site stand out from the competition, it will never do anything to impair the legibility or readability of your text. It also would be a good choice if you want your visuals to leave a greater impact.

My Recommendations

And, so, this now brings me to my own recommendations on what you should use in terms of type for mobile websites. Here’s the verdict:

  1. Don’t be afraid to start with a system default font. They’re going to be your safest choices until you get a handle on how far you can push the limits of mobile typography.
  2. Use only a sans serif or serif font. If your desktop website uses a decorative or handwritten font, ditch it for something more traditional on mobile.

    That said, you don’t have to ignore decorative typefaces altogether. In the examples from Hill Holliday or Flywheel Sports (as shown above), you can see how small touches of custom, non-traditional type can add a little flavor.

  3. Never use more than two typefaces on mobile. There just isn’t enough room for visitors to handle that many options visually.

    Make sure your two typefaces complement one another. Specifically, look for faces that utilize a similar character width. The design of each face may be unique and contrast well with the other, but there should still be some uniformity in what you present to mobile visitors’ eyes.

  4. Avoid typefaces that don’t have a distinct set of characters. For instance, compare how the uppercase “i”, lowercase “l” and the number “1” appear beside one another. Here’s an example of the Myriad Pro typeface from the Typekit website:

    Myriad Pro characters


    Myriad Pro’s typeface in action. (Source: Typekit) (Large preview)

    While the number “1” isn’t too problematic, the uppercase “i” (the first letter in this sequence) and the lowercase “l (the second) are just too similar. This can create some unwanted slowdowns in reading on mobile.

    Also, be sure to review how your font handles the conjunction of “r” and “n” beside one another. Can you differentiate each letter or do they smoosh together as one indistinguishable unit? Mobile visitors don’t have time to stop and figure out what those characters are, so make sure you use a typeface that gives each character its own space.

  5. Use fonts that are compatible across as many devices as possible. Your best bets will be: Arial, Courier New, Georgia, Tahoma, Times New Roman, Trebuchet MS and Verdana.

    Default typefaces on mobile


    A list of system default typefaces for various mobile devices. (Source: tinytype) (Large preview)

    Android-supported typefaces


    Another view of the table that includes some Android-supported typefaces. (Source: tinytype) (Large preview)

    I think the Typeform website is a good example of one that uses a “safe” typeface choice, but doesn’t prevent them from wowing visitors with their message or design.

    The Typeform home page


    Typeform’s striking typeface has nothing to do with the actual font. (Source: Typeform) (Large preview)

    It’s short, to the point, perfectly sized, well-positioned, and overall a solid choice if they’re trying to demonstrate stability and professionalism (which I think they are).

  6. When you’re feeling comfortable with mobile typography and want to branch out a little more, take a look at this list of the best web-safe typefaces from WebsiteSetup. You’ll find here that most of the choices are your basic serif and sans serif types. It’s definitely nothing exciting or earth-shattering, but it will give you some variation to play with if you want to add a little more flavor to your mobile type.

Wrapping Up

I know, I know. Mobile typography is no fun. But web design isn’t always about creating something exciting and cutting edge. Sometimes sticking to practical and safe choices is what will guarantee you the best user experience in the end. And that’s what we’re seeing when it comes to mobile typography.

The reduced amount of real estate and the shorter times-on-site just don’t lend themselves well to the experimental typography choices (or design choices, in general) you can use on desktop. So, moving forward, your approach will have to be more about learning how to reign it in while still creating a strong and consistent look for your website.

Smashing Editorial
(lf, ra, yk, il)


Link: 

A Reference Guide For Typography In Mobile Web Design

Universal Principles Of User Experience Design

(This is a sponsored article.) As designers working in an ever-changing field, it’s important that we develop an understanding of the timeless design principles that underpin everything we do. In the second article in my series for Adobe XD, I’ll explore the foundations that enable us to establish some universal principles of UX.
These principles, which should sit at the heart of everything we design and build, are critical and will stand the test of time:

Source article:  

Universal Principles Of User Experience Design

Fluid Responsive Typography With CSS Poly Fluid Sizing

Fluid layouts have been a normal part of front-end development for years. The idea of fluid typography, however, is relatively new and has yet to be fully explored. Up until now, most developers’ idea of fluid typography is simply using Viewport units maybe with some minimum and maximum sizes.

Fluid Responsive Typography With CSS Poly Fluid Sizing

In this article, we are going to take it to another level. We are going to examine how to create scalable, fluid typography across multiple breakpoints and predefined font sizes using well-supported browser features and some basic algebra. The best part is that you can automate it all by using Sass.

The post Fluid Responsive Typography With CSS Poly Fluid Sizing appeared first on Smashing Magazine.

Original article: 

Fluid Responsive Typography With CSS Poly Fluid Sizing

The Art Of Hand Lettering

Hand lettering has taken the world by storm. It has become the beautiful connection — a juxtaposition — between design and words. The letter forms in the typography have been broken down into their shapes, flourishes, and textures.

The Art Of Hand Lettering

Hand lettering speaks volumes. This is an art form which allows us to see the space between the letters, and the style of the lettering as a piece of art that can deeply evoke emotions and bring meaning — nostalgia, happiness, joy, and love.

The post The Art Of Hand Lettering appeared first on Smashing Magazine.

Read More:

The Art Of Hand Lettering

Responsive And Fluid Typography With vh And vw Units

Embracing fluid typography might be easier than you think. It has wide browser support, is simple to implement and can be achieved without losing control over many important aspects of design.
Unlike responsive typography, which changes only at set breakpoints, fluid typography resizes smoothly to match any device width. It is an intuitive option for a web in which we have a practically infinite number of screen sizes to support.

View original – 

Responsive And Fluid Typography With vh And vw Units

Thumbnail

Benton Modern, A Case Study On Art-Directed Responsive Web Typography

Having the ability to set legible body copy is an absolute must, and we’ve come a long way with web typography since the dawn of web design. However, I feel like we have allowed the lack of variety prior to the rise of web fonts to dampen our creativity now that thousands of web fonts are at our disposal. Have usability conventions and the web’s universality steered us away from proper art direction? Have we forgotten about art direction altogether? I believe so.

As designers, we can achieve much more with type, and with just a little more thought and creativity, we can finally start to take full advantage of the type systems available. Let’s look at ways we can push typographic design on the web further, beyond the status quo of today.

Benton Modern Formal version1
Benton Modern Formal version. (View large version2)

The Benton Modern brochure website3 (a project I was involved in) is a perfect example for showcasing how a large type family can be utilized to improve legibility and readability across breakpoints, while at the same time evoking emotion and providing a pleasant experience. We shall explore the ideas introduced to push the boundaries of typographic design on the web and get practical, too, with a key focus on responsive web typography.

First, The Basics Of Responsive Web Typography

You’re probably aware of responsive web typography by now and how it can solve challenges outside of core responsive web design. However, as the focus of this article isn’t on the ins and outs of responsive web typography, we shall not be exploring it in any great detail.

If you’re interested in learning more about general typesetting for the web and how to approach certain issues, many4 resources exist5 to help you.

Furthermore, my “Responsive Typography6” talk and chapter in Smashing Book 47, in which I propose reusing “traditional” typography rules and translating them to the language of CSS, should help kickstart any aspiring web typographer to improve their typography game.

To also help you on your way, here’s a quick rundown of some of the methods I’ve been advocating in recent years, methods that were applied to the Benton project, too:

  • Provide different font sizes for different reading distances, currently achievable by detecting a device’s form factor using @media queries. Long term, this is probably not ideal — that is, until reading distance-detection techniques8 become more feasible. In the meantime, use Size Calculator9 by Nick Sherman10 and Chris Lewis11 to calculate the physical or perceived font size when factoring in reading distance.
  • Maintain perfect proportions in a paragraph with letter spacing, word spacing and line height properties for each breakpoint. Universal Typography’s demo12 by Tim Brown13 of Nice Web Type14 is a very useful tool that can help you experiment with and adjust your paragraph proportions accordingly.
  • Establish hierarchy using either a typographic scale (Modular Scale15 is a useful tool by Tim Brown and Scott Kellum16) or different styles at the same font size — for instance, uppercase for h2, small caps for h3 and italics for h4 subheads. For more options and ideas on styling subheads, may I suggest you read “Setting Subheads With CSS17” and explore examples of subheads set with CSS18.
  • For small screens, indent paragraphs and separate page sections with white space. For large screens, use block paragraphs and separate page sections with graphical elements (lines, shapes, color).
  • Use graded fonts to normalize rendering across different pixel densities. Font grades are very subtle font weights used to compensate for different ink and paper qualities, as well as for different pixel densities on screen. This method is explained in detail in iA19’s article “New Site With Responsive Typography20.” In short, lighter grades are used for low-DPI screens and heavier grades for high-DPI screens, while graded fonts will also compensate for different sub-pixels’ direction between portrait and landscape mode on mobile and tablet devices.
  • Look for type families that have multiple optical sizes21, and use appropriate styles for body copy, tiny text and display sizes. For instance, Font Bureau22, the company behind the Benton Modern family, makes many families like this with a wide stylistic palette.
  • Use different font widths according to the width of the screen (see what happens with the subheads on the Benton website23 when you resize the browser window). For instance, use a condensed font for small screens and a wider font for larger desktop screens, just like on the brochure website for Input24 (again, resize the window). In the case of the Benton project, we set different font widths manually for each breakpoint, but there’s also a solution for automatic swapping using Font-To-Width25 (by Sherman and Lewis) that takes advantage of multiple-width type families to fit pieces of text snugly within their containers.

    Here’s another tip: If you intend to use Georgia or Verdana on large screens, replace them with Georgia Pro Condensed or Verdana Pro Condensed26 on mobile screens. The reason why Georgia Pro and Verdana Pro’s condensed widths work well at small sizes is because they aren’t extremely condensed and, hence, can still be read comfortably.

With this basic primer on responsive web typography out of the way, let me walk you through the process of designing a web page that is meant not only to inform, but to amaze!

Show, Don’t Tell

Webtype27 commissioned us to build a brochure website for Benton Modern soon after Indra Kupferschmid28 had seen my talk on responsive web typography at Smashing Conference in Oxford. The brief was to showcase what could be achieved typographically with a versatile type family coupled with responsive web typography using as many responsive techniques as possible, essentially putting into practice the elements presented and demonstrated in my talk. With Indra Kupferschmid as the chief type savant and Nick Sherman as the onboard quality assurance director, there was certainly to be no trouble with experimenting and pushing the boundaries.

From the very start, we wanted the user to experience the type family through the design and not just through a full page of body copy. That being said, in searching for the right metaphor to use, we eventually settled on creating two distinctive designs — the formal29 and the expressive30. Both are fully responsive, utilizing the same HTML, and for all intents and purposes showcase the benefits of separating structure from presentation, so don’t forget to resize your browser and inspect the HTML and CSS.

Learning About The Typeface

Indra’s elaborate copy was a good starting point to get to know the typeface. When you receive content up front, as was the case in this project, it’s so much easier to create semantic HTML and to explore different styles. Here’s how we started our investigative testing, bearing in mind that Benton Modern comprises 48 styles in total:

  1. First, we tested all of the styles at large and small sizes, stretching and squeezing every which way possible. We used Reading Edge optical sizes31 (designed for 9- to 14-pixel font sizes) as subheads, and display optical sizes (designed for headlines) for body copy. We wanted to see what could go wrong and challenge the intended use for each style. However, the solution that we settled on was still pretty much in line with the intended use for each optical size.
  2. Next, we tested how different styles behave in narrow columns versus wider blocks of text. Hyphenated and justified verus left-aligned. Tightly spaced versus loosely spaced.
  3. Lastly, we analyzed all of the glyphs one by one, searching for little hidden gems. Apart from the ampersand — which is always an obvious choice — another good candidate was the uppercase R.
An early stage prototype32
An early-stage prototype. (View large version33)

From there, the next step was to apply some basic styles to the page. One of the early ideas was to adopt a traditional newspaper column layout, which we tried. With the exception of this high-level concept, we still didn’t have a definitive layout concept by this point.

Indented paragraphs in columns were too narrow to be justified and hyphenated34 properly, so we just kept the hyphenation to improve the texture a little bit.

.columns p 
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   hyphens: auto;

.columns p + p 
   text-indent: 1.5rem;

We used columns only when there was enough horizontal space. But we also wanted to avoid columns bleeding out of the screen vertically, because that would require scrolling up and down during reading when moving from column to column. That’s why we introduced another @media query to test the height of the screen before applying columns.

@media only screen and (min-height: 25em) 

   @media only screen and (min-width: 40em) and (max-width: 59.9375em) 
      -webkit-columns: 2;
      -moz-columns: 2;
      columns: 2;
      -webkit-column-gap: 2.7em;
      -moz-column-gap: 2.7em;
      column-gap: 2.7em;
   

   @media only screen and (min-width: 60em) 
      -webkit-columns: 3;
      -moz-columns: 3;
      columns: 3;
      -webkit-column-gap: 2.7em;
      -moz-column-gap: 2.7em;
      column-gap: 2.7em;
   
} 

Designing Content

The next step was to analyze the content in more detail. That way, we were able to establish what the different sections were and adjust the details as we went along.

The formal version was the first to be developed. We created a huge headline to reflect newspaper headlines and added the year that the series started. The deck was the obvious element to style next. We experimented with a condensed version, and to our surprise it worked immediately. At that stage, the page navigation still didn’t exist and was only included much later on to improve overall usability, as well as to demonstrate the use of brackets as graphic elements.

The sections were a little dull, though. The hierarchy and arrangement of subhead, intro paragraph and columns were quickly established using the rules explained previously, but something was still missing. After some trial and error, we decided to separate the different sections with dotted borders to further emphasize the fine detail in the design of the Benton Modern series, and we introduced the section sign § (Alt + 6 on a Mac) to mark the sections. However, that still wasn’t good enough, so we again previewed numerous glyphs to find suitable candidates for other sections. We ended up using § for “About,” • for “Optical Sizes,” an italic i for “How to Use,” + for “Bonus Features” and * for “Pairings.” Some of these characters are rarely used in web design, so introducing them as decorations felt natural.

Plenty of little details35
Plenty of little details. (View large version36)

At this point the design was pretty solid, but we still needed to highlight the most impressive facts to showcase to the reader the inherent versatility of the family. So we established a no-nonsense look and feel by enlarging the important numbers: 3 optical sizes, 48 styles to choose from, and 4 widths in display styles.

The first version of pairing swatches was set in Pinterest37-inspired columns, as with the rest of the sections. Yet we had a need to change it — at least slightly — because this section was not about Benton Modern, but about its companions. Benton Modern RE fonts38 are really great at small sizes, so introducing the pairs as contrasting large headlines made sense. Indra’s selection of pairings worked very well without many additional adjustments. The only areas that required special attention were the custom sizes for each headline, especially if we wanted the headlines to resize with the screen.

Viewport Width For Smooth Type Scaling

The only CSS units that support smooth scaling are vw (1% of the viewport’s width), vh (1% of the viewport’s height), vmax (1% of the longest side) and vmin (1% of the shortest side). The resulting CSS for one headline is composed of three font-size declarations — values in pixels, root ems39 (rems) and viewport widths — one for each flexible breakpoint (small to medium screens) that covers older browsers, too:

#swatch-benton-sans h1  
   @include rem(font-size, #208/16); 
}
@media only screen and (max-width: 29.9375em) 
   #swatch-benton-sans h1 
      @include rem(font-size, #57/16); 
      font-size: 18.75vw; 
   }
}
@media only screen and (min-width: 30em) and (max-width: 61.9375em) 
   #swatch-benton-sans h1 
      @include rem(font-size, #86/16);
      font-size: 20vw; 
   }
}

As you can see, we’re using a Sass mixin here. It returns the given property with values in pixels, as well as in root em units.

@mixin rem($property, $values) 
   $max: length($values);
   $pxValues: ‘’;
   $remValues: ‘’;
   
   @for $i from 1 through $max 
      $value: strip-unit(nth($values, $i));
      $pxValues: #$pxValues + $value*16px;
      @if $i < $max 
         $pxValues: #$pxValues + “ “;
      }
   } 
   
   @for $i from 1 through $max 
      $value: strip-unit(nth($values, $i));
      $remValues: #$remValues + $valuerem;
      @if $i < $max 
         $remValues: #$remValues + “ “;
      }
   } 
   
   #$property: $pxValues; 
   #$property: $remValues; 
}

OpenType Features

Whenever you need to showcase important details within the content — in this case, OpenType features such as the alternate R, the ligatures and the small caps — it’s always good to highlight these features in an interesting way. We didn’t want to use CSS images for graphic details, so we simply enlarged the type and brought the details to focus. The difference between ligatures and default glyphs is clear, and comparing small caps with uppercase and lowercase counterparts is easy.

OpenType Features40
OpenType Features. (View large version41)

If you were wondering how to enable OpenType features in CSS, here are a couple of examples with vendor prefixes:

/* Alternate characters */
-webkit-font-feature-settings: “ss01”;
-moz-font-feature-settings: “ss01” 1;
font-feature-settings: “ss01”;

/* Common ligatures (ff, fi, ffi, fl, ffl, fj, …) */
-webkit-font-feature-settings: “liga”;
-moz-font-feature-settings: “liga” 1;
font-feature-settings: “liga”;

/* Small caps */
-webkit-font-feature-settings: “smcp”;
-moz-font-feature-settings: “smcp” 1;
font-feature-settings: “smcp”;

You can test all of the OpenType features available with CSS in Richard Rutter42’s CSS3 Font-Feature-Settings OpenType Demo43. Consult Bram Stein44’s excellent The State of Web Type45 to check which features are supported in which browsers and to what extent.

OpenType Features in Safari Are… a Drag

There’s one piece of bad news. Safari on both Mac and iOS support OpenType features but ignores any assigned value46. The safest way to use alternate characters or small caps in Safari is by loading subset fonts (subset fonts contain only a subset of glyphs from the full font file). For the Benton Modern project, we decided to test browser capabilities with @support before applying small caps, and we provided a fallback for browsers that don’t support font-feature-settings:

@supports ((font-feature-settings: “smcp”) or
   (-webkit-font-feature-settings: “smcp”) or 
   (-moz-font-feature-settings: “smcp” 1)) 
   .small-caps 
      text-transform: lowercase; 
      -webkit-font-feature-settings: “smcp”; 
      -moz-font-feature-settings: “smcp” 1;
      font-feature-settings: “smcp”; 
   
}

Expressive Details

The Formal newspaper-inspired style looked really great. It was well organized, with plenty of small details. But we wanted to push the design a little further. How about creating a magazine-inspired design? We retained the same emphasis on elements as in the formal version but fed the opening section and all section subheads with steroids using pseudo-elements (for example, the R and the asterisk on the “cover” page), and we created a specific arrangement for each subhead by repositioning each word in a subhead in a Lubalinesque47 manner.

Expressive Details48
Expressive Details. (View large version49)

3D Effects

The 3D effect on “The Complete Series” was achieved with multiple text shadows, as explained in Tim Brown’s Typekit Practice50 lesson “Using Shades for Eye-Catching Emphasis51.”

3D Effects52
3D Effects. (View large version53)

Drop Caps

Drop caps can be achieved simply by floating the first character. But vertical metrics complexities54 as well as cross-browser inconsistency make it virtually impossible to get drop caps right. Luckily, Adobe engineers wrote dropcap.js55, a small script that solves that problem. The setup is very straightforward, and it’s easy to adjust positioning by specifying the number of lines the drop cap should span, as well as the height of the drop cap itself. There’s a bonus: The script doesn’t require any external JavaScript libraries.

var dropcaps = document.querySelectorAll(‘.drop-cap’);

if (window.innerWidth < 600) 
   window.Dropcap.layout(dropcaps, 3);
 else 
   window.Dropcap.layout(dropcaps, 5, 3);

Drop Caps56
Drop Caps. (View large version57)

Flipped and Rotated Type

All elements that needed special treatment were wrapped in their respective spans and given dedicated class names. This meant adding non-semantic markup, but there was no other way around it, especially if we wanted to take full control over the presentation.

Flipped and Rotated Type58
Flipped and Rotated Type. (View large version59)

We flipped parts of the pairings section subhead with the transform: scale rule. The great thing is that if the transform property is not supported by the browser, nothing will happen.

.flip 
   display: block;
   -webkit-transform: scale(-1, -1);
   -moz-transform: scale(-1, -1);
   transform: scale(-1, -1);

Flipped and Rotated Type60

Flipped and Rotated Type. (View large version61)

The same applies to the O in the “Bonus Features,” which we rotated with the transform: rotate rule. When rotating letters, you might want to readjust the positioning after rotation (watch out for the aforementioned vertical metrics issues). The values will vary from typeface to typeface and glyph to glyph, so there’s no generic rule.

.o 
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   transform: rotate(90deg);
   /* Glyph-specific adjustments */

Setting Expressive Subheads

Setting responsive expressive subheads is a piece of cake when you grasp the underlying concept. We need to do only two things:

  1. set the font size of a container in viewport width units,
  2. size everything that’s inside the container in em units.
<div class="container">
   <h1>
      <span class="s1">You</span>
      <span class="s2">&</span>
      <span class="s3">Me</span>
   </h1>
</div>

Elements inside the container can be repositioned either absolutely or using negative margins. If you’re using absolute positioning, then it’s best to fix the aspect ratio of the h1, thus retaining proportions. If you’re fixing the aspect ratio, you can also use percentages instead of ems, because now you have a height reference for vertical properties in place.

Setting Expressive Subheads62

Setting Expressive Subheads. (View large version63)

Example of positioning with margins:

.container 
   font-size: 10vw;

.container h1 
   font-size: 1em;
   line-height: 1;
   width: 100%;

.s1 
   margin-left: 1em;
   margin-top: 1em;

Example of absolute positioning:

.container 
   font-size: 10vw;

.container h1 
   font-size: 1em;
   line-height: 1;
   position: relative;
   width: 100%;
   height: 0;
   padding-top: 75%; /* 4:3 aspect ratio */
   padding-top: 50%; /* 2:1 aspect ratio */

.s1 
   position: absolute;
   left: 10%;
   top: 10%;

Voila! Compare all three positioning variants in the Expressive Web Typography64 demo.

Steal Ideas!

Now you hopefully see how far we can take typography on the web. To take full advantage of the methods discussed in this article, look for type families with multiple font styles and optical sizes. The only reason we were able to make all of these responsive adjustments is that the Benton Modern is such a versatile typeface family with so many variants.

View the HTML and CSS source on Benton Modern65, use those techniques to improve typography in your own projects, and let us know if you come up with something different. Setting type on the web still involves a lot of manual labor, especially for the smaller, more delicate details, but typographic tools are emerging66 to speed up the process. Until then, don’t be intimidated because there is always a solution to a given problem. The next time you are offered a challenging project, bite the bullet, test like crazy, and do whatever it takes.

(al, ml)

Footnotes

  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2015/05/01-formal-opt.jpg
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2015/05/01-formal-opt.jpg
  3. 3 http://bentonmodern.webtype.com/
  4. 4 http://nicewebtype.com/
  5. 5 http://rwt.io/
  6. 6 https://vimeo.com/96406270
  7. 7 https://shop.smashingmagazine.com/products/smashing-book-4-ebooks
  8. 8 http://webdesign.maratz.com/lab/responsivetypography/
  9. 9 http://sizecalc.com
  10. 10 http://nicksherman.com
  11. 11 http://chrislewis.codes
  12. 12 http://universaltypography.com/demo
  13. 13 https://twitter.com/timbrown
  14. 14 http://twitter.com/nicewebtype
  15. 15 http://modularscale.com
  16. 16 https://twitter.com/scottkellum
  17. 17 http://blog.typekit.com/2013/07/25/setting-subheads-with-css/
  18. 18 http://webdesign.maratz.com/lab/subheads/
  19. 19 http://ia.net
  20. 20 http://ia.net/know-how/responsive-typography
  21. 21 http://kupferschrift.de/cms/2012/05/multi-axes-families/
  22. 22 http://www.fontbureau.com/
  23. 23 http://bentonmodern.webtype.com/
  24. 24 http://input.fontbureau.com/info/
  25. 25 http://font-to-width.com
  26. 26 http://georgiaverdana.com
  27. 27 http://www.webtype.com/
  28. 28 http://kupferschrift.de/
  29. 29 http://bentonmodern.webtype.com/formal/
  30. 30 http://bentonmodern.webtype.com/expressive/
  31. 31 http://www.fontbureau.com/ReadingEdge/
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2015/05/02-early-opt.jpg
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2015/05/02-early-opt.jpg
  34. 34 http://practicaltypography.com/hyphenation.html
  35. 35 http://www.smashingmagazine.com/wp-content/uploads/2015/05/05-separators-opt.jpg
  36. 36 http://www.smashingmagazine.com/wp-content/uploads/2015/05/05-separators-opt.jpg
  37. 37 https://www.pinterest.com/
  38. 38 http://www.webtype.com/font/bentonmodern-re-family/
  39. 39 http://www.w3.org/TR/css3-values/#rem-unit
  40. 40 http://www.smashingmagazine.com/wp-content/uploads/2015/05/04-opentype-opt.jpg
  41. 41 http://www.smashingmagazine.com/wp-content/uploads/2015/05/04-opentype-opt.jpg
  42. 42 https://twitter.com/clagnut
  43. 43 http://clagnut.com/sandbox/css3/
  44. 44 https://twitter.com/bram_stein
  45. 45 http://www.stateofwebtype.com/#font-feature-settings
  46. 46 http://www.stateofwebtype.com/#font-feature-settings
  47. 47 http://lubalincenter.cooper.edu
  48. 48 http://www.smashingmagazine.com/wp-content/uploads/2015/05/06-expressive-opt.jpg
  49. 49 http://www.smashingmagazine.com/wp-content/uploads/2015/05/06-expressive-opt.jpg
  50. 50 http://practice.typekit.com/
  51. 51 http://practice.typekit.com/lesson/using-shades/
  52. 52 http://www.smashingmagazine.com/wp-content/uploads/2015/05/07-3d-opt.jpg
  53. 53 http://www.smashingmagazine.com/wp-content/uploads/2015/05/07-3d-opt.jpg
  54. 54 http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/
  55. 55 http://webplatform.adobe.com/dropcap.js/
  56. 56 http://www.smashingmagazine.com/wp-content/uploads/2015/05/08-dropcap-opt.jpg
  57. 57 http://www.smashingmagazine.com/wp-content/uploads/2015/05/08-dropcap-opt.jpg
  58. 58 http://www.smashingmagazine.com/wp-content/uploads/2015/05/09-flipped-opt.jpg
  59. 59 http://www.smashingmagazine.com/wp-content/uploads/2015/05/09-flipped-opt.jpg
  60. 60 http://www.smashingmagazine.com/wp-content/uploads/2015/05/10-rotated-opt.jpg
  61. 61 http://www.smashingmagazine.com/wp-content/uploads/2015/05/10-rotated-opt.jpg
  62. 62 http://www.smashingmagazine.com/wp-content/uploads/2015/05/11-optical-sizes-subhead-opt.jpg
  63. 63 http://www.smashingmagazine.com/wp-content/uploads/2015/05/11-optical-sizes-subhead-opt.jpg
  64. 64 http://webdesign.maratz.com/lab/expressive-web-typography/
  65. 65 http://bentonmodern.webtype.com
  66. 66 http://typetester.org

The post Benton Modern, A Case Study On Art-Directed Responsive Web Typography appeared first on Smashing Magazine.

Read original article:

Benton Modern, A Case Study On Art-Directed Responsive Web Typography

Thumbnail

The Shocking Truth About This Little Thing Called Kerning

Ever heard of kerning?

You’ve probably read about it. Maybe you can even explain what it is. But do you know how big of an impact kerning can have on your digital marketing efforts as a whole?

Lest you think that I’m making too much of too little, let me explain and give you a few takeaways that could give you significant improvements in your marketing — everywhere that text is present.

What is kerning?

Kerning is the white space between letters.

Here’s one example of one word with various kerning adjustments:

kerning 1

Image from Iupui.com.

That’s it. Kerning is basically how much space is between characters, and how this adjustment affects the ease of reading.

Most Web copy displays fonts that are automatically kerned.

kerning 2

Image from Sitepoint.com.

Kerning sounds simple, largely because it is. But when kerning is applied over the broad spectrum of variables like font faces, copy blocks, line spacing, etc., it is an issue of enormous significance.

Even Google has a thing for kerning. Here’s a SERP Easter Egg reported by Search Engine Land:

kerning 3

The difference lies between the kerning adjustment that the SERP displays for the query “kerning” as compared with “typography kerning.”

What impact does kerning have?

Kerning sounds so simple. It’s such a pervasive part of our everyday Web experience. You are experiencing the impact of kerning at this very moment as you look at the letters and words in this article.

Kerning can make or break a message.

Kerning gone wrong makes it obvious why kerning is so important.

Take a look at these examples, and look for the kerning mistakes.

kerning 5

kerning 4

kerning 6

kerning 7

kerning 8

kerning 9

kerning 10

kerning 11

kerning 12

kerning 13

kerning 14

Examples from InspirationFeed, and Creativebloq.

As awful as these kerning mistakes are, there are plenty of opposite examples of kerning done right. But the great examples are hard to spot. Kerning is like a pair of great shoes. You are not constantly thinking, “Wow. These shoes are amazing!” But when you wear a pair of cheap shoes, you realize how good you had it with the other shoes.

Good kerning is highlighted by the presence of bad kerning.

Kerning is everywhere.

Every time you see more than one letter or symbol together, you’re seeing kerning in action.

This seemingly little change — a simple presence or absence of space — has such enormous impact in every area of the Web.

Kerning affects readability, and readability affects everything else.

Instapage puts it like this:  “[If] the kerning is too minimal your visitors will find it harder to understand your message…they’ll just mozy on over to some other service instead of squinting their eyes to understand what you have written for them.”

Marketing is about readability. Whether it’s content marketing, landing page optimization, or email marketing — the customer must read your message.

Kerning has an impact on friction.

There are many sources of friction on landing pages and conversion-oriented pages. Friction is anything that gets in the way of a user doing what you want them to do on the page — read it, click something, etc.

The readability of your pages is a significant area where friction can creep up. The reason is simple. If the user can’t read your copy, misreads your copy, has to work hard to read your copy or otherwise stumbles over your copy, then they are experiencing friction.

Not persuaded? Just take a look again at those examples above.

Kerning affects conversions.

You may already know that seemingly tiny changes in web copy can have a major impact on conversions. A little word switch in a CTA, or even the placement of a headline and WHAM! conversions explode by 2,000%!

What about kerning? This is one of those often-overlooked, often-untested, often-forgotten elements of landing page design that may very well boost your conversion rates by a healthy percentage.

What does kerning communicate?

Kerning affects the way we read and, therefore, the way that we perceive certain phrases or words.

Tight kerning creates a strong and secure feeling.

Adidas’s logo uses a very tight kerning, which increases the feeling of strength that the brand wants to communicate:

kerning 15

UnderArmour also has a very tight kerning in their text logo. This plays strategically into the way that the brand positions itself as a strong and protective performance wear provider.

kerning 16

One of the most recognized brands, FedEx, uses the same technique. All the letters touch each other. This allows the brand to feature the negative spaced arrow between the E and X.

kerning 17

The Washington Post combines the power of font face and kerning to create their iconic, classic, and confidence-building logo:

kerning 18

Loose kerning creates an airy, fresh, fun, and relaxed feeling.

A difference in kerning, combined with other typographical factors, can completely reverse the whole feel of a phrase, sentence, logo, or headline.

Sunsilk, a hair care brand has loose kerning, which helps contribute to the fresh, easy, airy, and breezy hair look that they want to advance.

kerning 19

HTC’s log is also loosely kerned.

kerning 20

Clear advances their brand objectives by using an open custom kerning for their logo.

kerning 21

Notice how Land Rover’s kerning subtly emphasizes the word “Land” in the logo. The position, shading, and placement of the word provides its emphasis, but kerning does play a role.

kerning 22

How to learn more about kerning.

The best way to learn more about kerning is to actually experiment with it.

You can try your hand at kerning using Kerntype, a kerning game invented by Mark MacKay.

kerning 23

The goal of the game is to adjust the letters for the best kerning, as compared to a typographer’s preset solutions. The game features different fonts and words, both of which have a major impact on kerning.

Once you get a few words under your belt, you’ll start to get the hang of kerning, and — more importantly — understand how it impacts your web copy, readability, and even conversions.

Be careful, though. Once you learn about kerning, you can’t unlearn it. Worse, you can’t unnotice bad kerning.

kerning 24
Image from http://xkcd.com/1015/.

The blog at InspirationFeed tells you how to handle your superior knowledge:

“After you learn about kerning, your life will change. Suddenly you will start seeing uneven spacing everywhere which will most likely irk you. Some people might see you as a snob for bringing it up, but don’t pay attention to them. Just because you know something they don’t, does not make you the bad guy…”

When should you mess with kerning?

Kerning seems like such a minute detail, it’s tempting to just forget about it and let fonts automatically kern themselves.

That’s okay, to a certain extent.

I would argue, however, that the impact of kerning is significant enough to at least test in some situations. Here are a few areas in which adjusting kerning may be a good idea.

Logo

When you go to create your business logo, talk to your designer about kerning. If you’re designing it yourself, then talk to yourself about kerning.

Kerning can change the entire look and feel of a logo, as you saw from the examples above. Ask yourself what mood or feel you’d like to communicate with your logo, and then determine what impact kerning has on that mood or feel.

Landing page headings

Make adjustments to the headlines on your landing pages. A landing page headline is the most important element on the page. If your headline can more effectively gain and attract readers, then your landing page will be that much more effective.

Graphics with text

Graphic design programs give you the greatest amount of control over kerning, and these are places where kerning has a highly nuanced impact. When you bring in the elements of color, graphics, background, etc., kerning increases in significance.

Conclusion

The shocking truth on kerning is this:  It seems so little, but it has a huge impact on every interaction with text on the screen.

Once you grasp the significance of kerning, you can start to make changes:

  • Adjust kerning on your logo to influence the way your brand is perceived, and the attitude or emotion that you want to express.
  • Adjust kerning on headlines to make a bigger impact or enhance readability, increase attention, and even improve conversion rates.
  • Adjust kerning on areas where simple statements or phrases need to have a bigger impact. For example, CTA buttons.

These are big changes. Branding? Landing pages? Conversions? That’s money.

You’ll also be able to spot the tragic occurrences of bad kerning, and put a stop to anything that could damage your brand or copy.

A simple understanding of kerning can produce a major improvement in the way you do business.

Have you noticed the impact of kerning in the way that you do web design or conversion optimization?

Read other Crazy Egg articles by Neil Patel.

The post The Shocking Truth About This Little Thing Called Kerning appeared first on The Daily Egg.

Original article – 

The Shocking Truth About This Little Thing Called Kerning

Thumbnail

Size Matters: Balancing Line Length And Font Size In Responsive Web Design

As we refine our methods of responsive web design, we’ve increasingly focused on measure (another word for “line length”) and its relationship to how people read.


The popularization of the “ideal measure” has led to advice such as “Increase font size for large screens and reduce font size for small screens.” While a good measure does improve the reading experience, it’s only one rule for good typography. Another rule is to maintain a comfortable font size.

How People Read

People read online text to serve their own needs: to find the information they seek, to discover new ideas and to confirm their notions about life.

People Read in Three Ways

In 2006, the Nielsen Norman group released images of heat maps from eye-tracking studies. The areas where people looked at the most while reading are red, areas with fewer views are yellow, and the least-viewed areas are blue. As you can see below, the red and yellow areas form three variations of an F-shaped pattern. These variations aren’t surprising because people read in three different ways.

People read casually, skimming over text, reading words and sentences here and there to get a sense of the content. The heat map below shows the eye movements of someone casually reading about a product. The reader spent time looking at the image of the product, reading the first couple of sentences, then scanning through the bulleted list.

1-casual-reading-preview-opt1
The Nielsen Norman Group explored the F-shaped pattern for casual reading in 2006. (View large version2)

People also scan with purpose, jumping from section to section, looking for a particular piece of information. They might only read a word or the first couple of characters of a word as they scan the screen. The heat map below shows the eye movements of someone scanning the results of a Google search with purpose. The person read the first two results more slowly. Then, their eyes jumped from section to section, looking for the search term. Therefore, we do not see a strong vertical stroke along the left edge of the text.

2-scanning-with-purpose-preview-opt3
The Nielsen Norman Group explored the F-shaped pattern for purposeful scanning in 2006. (View large version4)

Finally, people read in an engaged manner. When they find an article or blog post they are interested in, they will slow down and read the whole text, perhaps even going into a trance-like state. The heat map below shows the eye movements of a person reading in an engaged manner. The tone is more continuous. There is more red (meaning more time spent reading) and less jumping around the page. When the intensity of reading dwindled because they lost interest (the corporate “About us” page might not have aligned with their interests), their eyes continued along the left edge of the text.

3-reading-preview-opt5
The Nielsen Norman Group explored the F-shaped pattern for reading in an engaged manner in 2006. (View large version6)


Reading Is a Complex Process

We know that people read in three different ways, but let’s look more closely at how people read — how the F-shaped patterns are formed.



We know that people. Don’t. Read. Each. Individual. Word. Instead, they use their foveal (or central) vision to focus on a word, while using their peripheral vision to find the next spot on which to focus.

4-reading-preview-opt

People don’t read each word individually.

5-reading-preview-opt
People use their foveal (central) and peripheral vision to read.


We also know that people don’t fixate on every word, but tend to skip words (their eyes take little leaps, called “saccades”) and fill in the rest. This is especially true of those who read casually or scan with purpose.

6-skipping-words-preview-opt

People skip words and fill in the rest.

Finally, we know that readers anticipate the next line while moving their eyes horizontally along a line; so, their eyes are drawn down the left edge of the text. This constant struggle between horizontal and vertical motion contributes to the F-shaped reading patterns.

7-F-shape-pattern-preview-opt
The constant struggle between horizontal and vertical eye movement results in the F-shaped patterns
.

Line Length (Measure) And Reading

Typographers have been writing about the relationship between horizontal and vertical eye motion for almost a century. In 1928, Jan Tschichold dismissed centered text and advocated for left-aligned text. He argued that this would assist readers by providing a consistent left (vertical) edge for the eye to return to after finishing each (horizontal) line.

The Ideal Measure: 45 to 75 Characters

We have multiple “rules” for facilitating a horizontal reading motion, one of which is to set text at a reasonable measure. As James Craig wrote in his book Designing With Type (originally published in 1971, now it its fifth edition):

Reading a long line of type causes fatigue: the reader must move his head at the end of each line and search for the beginning of the next line.… Too short a line breaks up words or phrases that are generally read as a unit.

If a casual reader gets tired of reading a long horizontal line, then they’re more likely to skim the left edge of the text. If an engaged reader gets tired of reading a long horizontal line, then they’re more likely to accidentally read the same line of text twice (a phenomenon known as “doubling”).

65 characters (2.5 times the Roman alphabet) is often referred to as the perfect measure. Derived from this number is the ideal range that all designers should strive for: 45 to 75 characters (including spaces and punctuation) per line for print. Many web designers (including me) apply that rule directly to the web. I’ve found, however, that we can reliably broaden the range to 45 to 85 characters (including spaces and punctuation) per line for web pages.

Measure and Web Type

Web designers have started to embrace a reasonable measure for text. Resources abound. Early writings include Mark Boulton’s more poetic approach to typography, which he refers to as “knowing your hanging punctuation from your em-dash” (“Five Simple Steps to Better Typography157”). Later writings include Harry Roberts’ more technical approach to typography (“Technical Web Typography: Guidelines and Techniques8”).

The most recent (and, dare I say, exciting) development in measure? Its role in responsive web design. More designers are using line length to help determine break points in a responsive structure! Chris Coyer recently developed his bookmarklet to test line length in order to help responsive web designers keep an eye on their measure (“Bookmarklet to Colorize Text Between 45 and 75 Characters9”).

But a good measure is only one rule for setting readable text.

Font Size And Reading

A good, comfortable font size is also necessary for setting readable text. This rule is old news. But given the number of responsive websites out there that make text too small or too big in order to achieve an ideal measure, the rule bears repeating.

Static Web Pages and Font Size

One benefit of a responsive web structure is readable text — text that people on hand-held devices don’t have to pinch and zoom to read. If a structure is static (like the two-column page shown below), then an ideal measure won’t do the trick. The text will simply be way too tiny to read on a small device such as a phone.

8-structure-preview-opt
Left: The main column has a good measure (45 to 85 characters are highlighted in yellow). But without a responsive structure, the text is too small to read on a small device without pinching and zooming. Right: The font size (13-pixel Verdana for the left column, 18-pixel Georgia for the introduction and 16-pixel Georgia for the article) is comfortable to read on a laptop.

Small Devices and Font Size

When designing a responsive website, start with a comfortable font size and an ideal measure to help determine break points. But when the time comes (as it always does), let the ideal measure go.

Text already looks smaller on hand-held devices than on larger devices. This is fine because people tend to hold small devices closer when reading. Current popular wisdom is to preserve the measure by further reducing the font sizes for held-held devices. In practice, retaining a comfortable font size as much as possible better preserves readability. The result will be a less-than-ideal measure but a more comfortable reading experience.

A responsive structure won’t help if small text on a hand-held device encourages readers to pinch and zoom!

9-font-size-preview-opt
Left: To retain an ideal measure, the font size is reduced to 12-pixel Verdana and 14-pixel Georgia for hand-held devices. The text is harder to read. Right: The font size is 13-pixel Verdana and 17-pixel Georgia for hand-held devices. The measure is no longer ideal, but the text is easier to read.


Large Devices and Font Size

When designing a responsive website, remember that measure and font size affect not only people using hand-held devices. The majority of people still use larger devices, such as laptops and desktop computers.

Some simple responsive structures keep text in a single column that expands and contracts with the size of the device. This can be an elegant, appropriate solution — except when the font size (instead of the column’s width) is used to preserve the ideal measure.

We’ve learned not to set text too small, but text that’s too big also poses a problem. When type gets too big, the reader’s eyes try to follow their usual pattern. But a font size that’s too large takes up more horizontal space, and it interferes with the horizontal flow that readers have established using their foveal vision and their pattern of skipping words.

We’re used to setting online text larger than printed text. This is fine because people tend to place large devices on their lap or on a desk while reading. But overly large text forces the reader to slow down and adjust how far they skip ahead as they read. Reading horizontally becomes cumbersome, and the reader will start to skip vertically down the left edge of the text.

10-horizontal-rhythm-preview-opt
When type gets too big, the reader tries to follow their usual horizontal rhythm. This forces them to read parts of words instead of entire words and to slow down and adjust their reading pattern.



Current popular advice is to preserve the measure by increasing the font size for large devices. For example, the one-column structure below has an ideal measure. But to achieve this ideal measure on large devices, we’ve had to set the text to 19-pixel Verdana, 22-pixel Georgia for the article, and a whopping 26-pixel Georgia for the introduction!

11-layout-at-hundred-percent-preview-opt10
In the layout above, details show the text at 100% size. The text on this web page is way too big for comfortable reading! Simple one-column responsive structures should use a narrower column on large devices, keeping the font size smaller and easier to read. (View large version11)

In practice, retaining a comfortable font size as much as possible and simply narrowing the column’s width instead are better. Look at what happens to A List Apart12 when it’s viewed on a hand-held device and on a laptop.

12-alistapart-example-large-opt13
A List Apart is perfectly readable on a hand-held device. But on a laptop, the text gets too big to be comfortably read. A shorter measure and a smaller font size would help people follow their usual horizontal rhythm. (View large version14)

Bonus Section: Line Height And Reading

So far, our focus has been on the relationship between font size and measure in responsive web structures. But line height also affects how people read.

Line Height Affects Horizontal Motion

Because readers scan content both horizontally and vertically, lines of text should feel like horizontal lines, not like woven fabric.

A line height that is too tight could undermine horizontal eye movement and encourage scanning down the left edge. It could also force people to reread lines of text. On the other hand, a line height that is too loose could make lines of text visually “float away” from each other. The lines will no longer feel like a cohesive unit, and vertical scanning becomes more difficult.

While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size.

15-line-height-preview-opt
While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size.

14-tight-height-preview-opt
Top: When the line height is too tight, it undermines the horizontal reading flow and increases doubling. Bottom: When the line height is too loose, lines of text visually float away from each other.

Line Height and Font Size

Setting line height is a complex balance of variables (font family, measure, font size, language). The most important variable when creating a responsive web structure is — surprise! — font size.

Smaller type tends to need more line height, not less. A generous line height helps the eye to recognize small word shapes more easily, and it encourages horizontal motion when the eye gets tired of reading small text.

16-line-height-at-hundred-fifty-percent-preview-opt
Left: A line height set at 150% is a bit too tight on an iPhone. Right: The exact same text with a slightly looser line height promotes horizontal movement and helps the reader to recognize word shapes.

Look Closely, Break Rules

When we design a responsive structure, testing it on a large device is easy; we can change a desktop browser’s size quickly. But designing on a desktop or laptop browser means that we are spending most of our time at an arm’s length from the text, and we don’t spend much time seeing how the text renders on small devices.

If you’re using measure to find break points in your responsive website, then you probably care about type and reading. Keep using measure! It’s a great starting point. But to see whether your type truly works, spend some time looking at it closely, on a smaller device. Balance measure, line height and font size as needed.

Remember that all rules are meant to be broken. Heck, Jan Tschichold broke his own rule and used centered text for much of his career. When the time comes, sacrifice measure for a comfortable font size. A good font size (not too small) is readable. A good font size (not too big) promotes horizontal eye motion. A good font size with the proper line height will help your readers find what they’re looking for.

Further Resources

(il, al)

Footnotes

  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2014/09/1-casual-reading-large-preview-opt.jpg
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/09/1-casual-reading-large-preview-opt.jpg
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2014/09/2-scanning-with-purpose-large-opt.jpg
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/09/2-scanning-with-purpose-large-opt.jpg
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/09/3-reading-large-opt.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/09/3-reading-large-opt.jpg
  7. 7 http://www.markboulton.co.uk/journal/five-simple-steps-to-better-typography
  8. 8 http://www.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/
  9. 9 http://css-tricks.com/bookmarklet-colorize-text-45-75-characters-line-length-testing/
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/09/11-single-column-large-opt.jpg
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/09/11-single-column-large-opt.jpg
  12. 12 http://alistapart.com
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/09/12-alistapart-example-large-opt.png
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2014/09/12-alistapart-example-large-opt.png
  15. 15 http://www.markboulton.co.uk/journal/five-simple-steps-to-better-typography
  16. 16 http://www.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/
  17. 17 http://webtypography.net/2.1.2
  18. 18 http://alistapart.com/article/how-we-read
  19. 19 http://css-tricks.com/bookmarklet-colorize-text-45-75-characters-line-length-testing/
  20. 20 http://jordanm.co.uk

The post Size Matters: Balancing Line Length And Font Size In Responsive Web Design appeared first on Smashing Magazine.

Original post: 

Size Matters: Balancing Line Length And Font Size In Responsive Web Design

Khajag Apelian: Type Design Is Not Only About Drawing Letters

Having started his career studying under some of the best typographic minds in the world, Khajag Apelian not only is a talented type and graphic designer, unsurprisingly, but also counts Disney as a client, as well as a number of local and not-for-profit organizations throughout the Middle East.
Even more impressive is Khajag’s willingness to take on work that most people would find too challenging. Designing a quality typeface is a daunting task when it’s only in the Latin alphabet.

See the article here: 

Khajag Apelian: Type Design Is Not Only About Drawing Letters

Exo 2.0, A Contemporary Geometric Sans Serif Font [Freebie]

Back in the days when he was a student, Portuguese graphic and type designer Natanael Gama started to play with glyphs — as a way to discover typography. Doodling around, he created Exo, a font which he released for free in a Kickstarter project. The project turned out to be quite successful. Exo became so popular that Natanael did a complete redesign. [Links checked February/20/2017]
It was two years ago.

Read more:

Exo 2.0, A Contemporary Geometric Sans Serif Font [Freebie]