alistapart's articles

  1. accessibility
So, what is it like to be color blind and also work in the web design and development industry? I'll answer that question throughout this article, but it's something that's always factored into my thoughts, given my passion for design and now my career. I wonder if having “normal” vision would have made me a better artist growing up. Would it make me better at my job now? Would I have pursued a more design-oriented career, as opposed to one that’s more dev-focused? These are just some of the things that pop into my head.As to my job and my color vision, no, colorblindness doesn’t affect my work as much as you’d think. During design meetings, I can quickly point out areas where we need to reconsider our color palette. While reviewing layouts, I’m able to explain why we need to evaluate how—and if—we’re only conveying information with color. I like that I can bring a singular perspective to the table and a voice for others like me; I am able to offer insights that others don’t necessarily have. When you can see a larger set of colors, it’s easy to gloss over those issues because they’re functionally invisible in the moment. If a design team doesn’t have a member who sees color differently, it’s important they find a way to test with actual users who do. There is no substitute for the real thing. Between workarounds anyone can use when color-sensitive situations crop up, and knowing how to separate myth from actual, smart usability practices for vision differences (and which design tools to use)—I want to set the record straight on a few things about designing with color and designing for color accessibility.What it means to be color blindThe term color vision deficiency, or CVD, more accurately reflects the type of impairment I have.When someone hears that I’m color blind, most immediately think that I can’t see colors whatsoever—that my entire field of vision is in grayscale, that I’m truly color blind. The term is very misleading and confusing because most people living with CVD are able to see many colors. (There are people who have a type of CVD called “monochromacy,” which is complete color blindness. About 1 in 30,000 people are affected, and they see the world in shades of gray.)  Red-green color blindness is the most culturally-familiar type, but CVD is a lot more interesting and varies far more in definition.So what colors can’t you see?I have been asked this question more times than I can count. My answer is always the same: it’s practically impossible for me to say. For me personally, colors become harder to distinguish the less bold they are. I can attest with absolute certainty that the sky is blue, a stop sign is red, the grass is green, and Big Bird is yellow. I can see those colors because—whether by design or by mother nature—they’re bold. But start placing certain colors adjacent to each other, and it becomes more difficult for me. There are no colors that I can’t see, rather, certain colors become muddied and start blending together. It’s not the same for everyone; that’s just my version of CVD.As light sensors go, humans don’t have the best eyes for color. Truth be told, they’re subpar compared to most species. WE are dismally color blind—as a species. On top of that, normal, “accurate” color vision varies from person to person; only minor anatomical differences determine whether your eyes are normal, “color blind,” or have extra (!) color vision powers. Let’s unpack all of that.Without getting too technical, what I can tell you is that our retinas are responsible for our color vision. Retinas have two main types of cells: rods and cones. Rods are primarily responsible for reading brightness/intensity levels, while cones are more specialized for detail and for picking up a particular range of light wavelengths. A person considered to have normal color vision has three types of cones, one each for bandwidths of short, medium, and long wavelengths of light. The bandwidth each cone can perceive is shaped like a bell curve and is unique to that cone inside your eye, and there are overlaps between cones. Cones also don’t actually correspond to specific colors, but because long wavelengths fall more toward the red part of the spectrum, medium wavelengths hover closer to green, and short wavelengths tend toward blue, you’ll hear them called red, green, and blue cones, due to sheer convenience (Fig. 1).Fig. 1. Normalized cone response spectra in humans for short (S), medium (M), and long (L) wavelengths. Notice the overlapping nature of the bell curves, and that the peak sensitivity for each cone doesn’t neatly match up with red, green, and blue.Color vision deficiencies occur because one or more of these cones is missing or has limited sensitivity (such as a narrow range), or when color perception in the brain is influenced by various other phenomena. This means that those colors in the spectrum effectively “drop out,” but since the light is still there, the brain translates it into a color based on peripheral data picked up by the other cones, combined with its brightness level.Since color vision is based on how our eyes and brain perceive light, and since our eyes have different genetic sensitivities to light, we can say that “accurate” color vision is somewhat subjective. Even people with “accurate” color vision don’t see things exactly the same way. Some people even have a fourth cone cell in their retinas; "tetrachromats" have enhanced color differentiation due to extra sensitivity between red and green. The extra cone actually came standard for most mammals in the past, but ongoing studies have suggested that 12% of the world's women might still have this fourth type of cone.There are some colors and wavelengths we can’t see because our eyes don’t have the right sensors, but for others, it’s due to anatomical make-up. The lens and cornea physically block very short wavelengths; it's why we can’t see ultraviolet light directly, even though we have the sensor capability. For people with aphakia (lack of a lens in one or both eyes, whether congenital or due to surgical removal), that’s not a problem; they see the color variations in near ultraviolet light naturally.Inside look at living with CVDsI think each person who has a CVD has their own set of challenges. There are also a lot of commonly-experienced situations, social and professional obstacles, and forms of discrimination and bullying we’re expected to just quietly put up with. Vision disabilities and color vision differences are often treated as quirky, entertaining phenomena on some mysterious map between normal vision and “blind.” People with CVDs encounter condescending remarks and dismissive treatment as part of daily life. It’s an invisible and misunderstood struggle that doesn’t have to be that way. I want to make a difference, and it fuels my desire to educate people on this topic.Insults and passive-aggressive commentsI’ve heard my fair share of passive-aggressive comments about my career choice. Also about my passion for art and design. Because how could I possibly be a designer if I can’t see colors? A question like that is condescending on two levels. One, it’s as if no one should be allowed to be an artist unless they can see colors accurately. And two, it shows a complete insularity or misconstrued awareness about color vision deficiencies.Nowadays, I work primarily as a front-end developer, but early on in my career, I designed web layouts in Photoshop. I didn’t code anything. I didn’t even write HTML. I never had an issue with colors because I was typically starting with a client’s corporate branding guidelines, so I was able to take those colors and use color palette generators to help me build out the look of my designs. I was never called out for making poor color choices, so I felt like I was doing a good job. It wasn’t until I was having a conversation with my boss, a man I looked up to as a professional, when I dropped my guard and mentioned that I was color blind. He then proceeded to question my entire decision to pursue the career I love. For a new professional, it was a pretty rough and demoralizing encounter to sit through and try to process, to say the least. Justifying my skill setIt feels as though I have had to justify my career decisions and my skill set on a regular basis over the years—as if CVD prevents me from being good at my job. By and large, it’s truthfully not something that comes up most of the time in my day-to-day work. At this point, most coworkers only find out that I have a CVD if I talk about it. Sometimes I even get a kick out of seeing how many months can stretch out before a situation comes along where I can mention it. It’s become an increasingly minor issue over the years, what with updated software and web technologies I can put to use when needed.Life via form factor (or winging it)Think for a moment about ways that color is used to convey information in the world around you. One thing that comes to my mind would be traffic lights. Color is used to let drivers know how they should proceed. No additional information is provided in case a driver is color blind. Traffic lights also use two of the colors most commonly associated with color blindness: red and green. Thankfully, most traffic lights have a common form factor. The top light is red, the middle light is yellow, and the bottom light is green. Even if I couldn’t tell the color, as long as I can tell which light is lit, then I’m able to get the necessary information.Unfortunately, not all designs are created equal; there may be no secondary or supplemental indicator to go by. When something is only conveyed with color, that’s a gap where information can get lost on a large group of people.Everyday social interactionsExchanging stories with others who grew up color blind sounds unfailingly familiar. Most of us have had similar experiences when it comes to people first finding out. As in part Q&A, part dog and pony show.We’re constantly asked, “What color is this?” (points to a nearby object) and “What color does this look like?” Then we watch as the person who asked us the question has their MIND BLOWN because we can’t see the correct color. Meanwhile, getting the color correct can sometimes be worse. First, there’s a look of confusion on the asker’s face. They can’t comprehend how we can both be color blind and see color at the same time, which leads to even more questions and “tests.” It turns what could have been a brief exchange into a lengthy and technical conversation, maybe at a bad time or inconvenient location.What I ended up learning is that these encounters will never go away, since most people I come into contact with have no knowledge about color blindness. I can either get annoyed by getting asked so many questions, or I can use it as an opportunity to educate.Getting passed over for jobsThe first time I was passed over for a job specifically due to my CVD was when I was a teenager. It was a part-time job after school, and I was told—point-blank—it was because I’m color blind. A position had opened up in the frame shop at a big-box crafts store I’d been working at for over a year. After having been told I was getting the position, my boss somehow found out I’m color blind, then informed me that I wasn’t qualified to work in the frames department for that very reason. That was it, no discussion. I had to watch the position go to one of my coworkers. That may have been a minor blip on my teenage radar at the time, but little did I realize it was the first of many. Between the discrimination and frustration I dealt with at various jobs over the years, I eventually convinced myself to not tell new employers or coworkers about my color vision deficiency. I wasn’t going to lie about it if I got asked, but I wasn’t going to offer up that information unsolicited.After working in the web industry for many years, I eventually transitioned to a new approach. At this point, I have successfully proven to myself that my color vision deficiency doesn’t negatively impact my job, and that bringing it up via the lens of accessibility makes it more of a natural thing I can discuss with coworkers so we can put it to constructive use on projects.Inside look at how I do my jobRelying on tools for helpBeing a professional front-end developer and designer with a CVD is easier than ever because there are so many tools and resources out there. Professionally, I have relied on color picker tools, websites that offer predefined color combinations, image editing software, and the mere fact that all colors can be represented by a hexadecimal value. In front-end tasks, I’m able to modify my code editor to suit my needs, for instance. I can use light or dark mode and a wide variety of color themes. I often use high-contrast themes that have been thoughtfully designed for developers with color vision deficiencies.Tools and resources I use regularly:Trello — Trello has a nice item labelling feature that takes CVDs into consideration. Not only can users label cards based on color, they can also use stripes, zigzags, polka dots, squiggly lines, and other shapes.VSCode — Visual Studio Code is my preferred code editor. I’m able to customize the interface with pre-built themes, and I can further modify those themes if I need to. I’m currently using one called Vue Theme, which I feel works really well for me. I choose themes based on what feels like the appropriate color contrast for my specific color vision deficiency. I lean toward dark backgrounds with brighter, higher-contrasting text colors that stand out against the background color. Another one of my favorites is Sarah Drasner’s Night Owl theme.Dev Tools — Whether it’s Chrome, Firefox, or Safari, I am constantly in the browser’s dev tools. There’s an ever-increasing number of features in dev tools that I can use to get the color information I need. Something I find handy is being able to Shift + click on a color value to cycle through various color formats (3 digit and 6 digit hexadecimal, RGB, HSL, and color name).Color Pickers — I installed a color picker Chrome browser extension called Eye Dropper to help me quickly grab colors from web pages. It allows me to sample colors from any web page, and provides me with the color in every format. This provides me with a secondary reassurance that the color I wrote in my CSS is truly being rendered. I wish I could trust the code as I see it in dev tools, but occasionally my eyes play tricks on me—I would swear that the color I’m seeing rendered on the screen isn’t the color value in dev tools. When I think that’s the issue, I can just grab the eye dropper and triple-check.Contrast Checker — I use the WebAIM Contrast Checker to make sure that the colors I’m using are in compliance with the guidelines.Accessibility and inclusionStatistically, 1 out of every 12 men and 1 out of every 200 women have a color vision deficiency. Across the world, approximately 300 million people are color blind. Those are significant numbers to factor in, especially if all those users are hampered by usability issues. Color alone can prevent them from completing interactions, receiving pertinent information, and from having the same experience as users with better color vision. That last fact alone is reason enough to pay attention to the concerns outlined here.Color disabilities and the Web Content Accessibility GuidelinesThe ADA doesn’t specifically call out color blindness; it simply refers to visual disabilities. However, the Web Content Accessibility Guidelines (WCAG) does specifically mention color. Compliance with the WCAG helps as a first step toward ensuring your site is usable by everyone, regardless of disabilities, but keep in mind that there could be additional factors at play with your site which may be “compliant” but still create difficulties for users.Color contrastFor those of us who have a CVD, one of the more prevalent issues is a site’s color contrast; trouble with specific colors doesn’t necessarily mean we’ll have trouble with the site. If a site doesn’t have the proper color contrast ratio (text color on top of background color), then the site’s information may be more difficult to see or understand. WebAIM, a non-profit organization, published reports in 2019 and 2020 outlining accessibility issues in the top one million home pages. As of February 2020, 86.3% of home pages tested had insufficient contrast.So, what does that mean? It means that the information on those sites is not being conveyed equally, to everyone. That’s 863,000 of the most influential and high-traffic sites on the web delivering an unequal user experience to billions of users worldwide on a daily basis.Data visualizationColor contrast is not the only issue when it comes to color blindness and accessibility. Data visualization is one area in particular that often relies heavily on color to convey information. It is also a prime example of what the WCAG mentions in their success criteria: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. – Web Content Accessibility Guidelines 2.1 - Success Criterion 1.4.1 Use of ColorI follow a few accounts on Twitter that bring attention to improper use of color in data visualizations. I would recommend getting started with these—they provide a lot of useful information and raise awareness surrounding issues that those of us with a CVD face:@[email protected]@WeTheColorBlind.Thankfully, making charts, graphs, and other visual aids color accessible isn’t that difficult. There is no need to remove colors altogether. Just try to use colorblind-friendly color palettes and don’t use problematic color combinations. Make sure all the data in your charts is labeled appropriately so that your readers can get the information in multiple ways. Our World in Data—a scientific online publication that focuses on large global problems such as poverty, disease, climate change, war, and inequality—has great examples of data visualizations of all types that I would consider to be colorblind-friendly.Whenever possible, I try to provide feedback from the perspective of someone who has a CVD, but I don’t make recommendations for specific color changes; I leave the color choices to those who aren’t color blind. Instead, I describe which elements I find difficult to interpret, and why. I tell them which information is getting lost on someone like me. The hope is that my feedback informs other designers of the need to make charts, tables, graphs, and maps more inclusive.Adding people with a CVD to your teamAs far as those of us who do have a CVD and work in the web industry: we are just as skilled and knowledgeable about our professions as anyone else, and there are plenty of ways that we can contribute to the visual aspects of projects—especially regarding color. We have the ability to review designs and report back whether any information is getting lost due to poor color contrast. We can inform designers if the chosen color palette is problematic. We can be the test subjects for our fellow UX designers during their usability research.There is also another point I’d like to get across here. There is a common misconception that a designer with a CVD doesn’t have the ability to do their job effectively. Hiring managers and other coworkers often make this assumption. Much to the contrary, people with CVDs have ways they work smart to work around their limitations. I mentioned earlier about the different tools I personally use to help me in my job. There are plenty of web industry professionals like me who use features in the tools at their disposal, getting the job done right, and so seamlessly that no one would guess they are color blind.That brings me to a broader point—the importance of hiring people with disabilities. I won’t go into the many, many, many reasons why companies should do that. Rather, I’ll mention some of the benefits from a design perspective. First and foremost, if you don’t have a disability, then how can you say conclusively that you know your product will work for those who do? The answer is, you can’t. Not without proper testing. Sure, there are companies out there that can help designers and developers conduct usability tests. But how amazing would it be if you had team members who could provide you with that invaluable feedback throughout the duration of each project? Think about all the knowledge you’ve accumulated about your profession. Think about all of the wisdom you can teach others. Now think about all the knowledge and wisdom that could be passed on to you by teammates living with a disability. Together, you can make your products truly inclusive. Trying to do it separately will always produce and reinforce limitations.Critical CVD tips for your projectsColor can enhance the message, but shouldn’t be the messenger. UX and UI designers have within their power the ability to take color blindness into consideration—or to ignore it. You can make sure information is conveyed to everyone, not just people who see color “normally.” That is a great responsibility, with real life-or-death repercussions at stake for many users.For those of us in the web industry, there are specific action items I’d like you to take away from all this.Design color palettes for “everyone”Carefully plan your color palette—not for those who are color blind, but for everyone. Always keep in mind that ALL the information you provide in your product needs to be easy to recognize and easy to understand by anyone who touches it. We can get too familiar with what we’re doing and forget that information is delivered in multifaceted ways, so we need to be mindful of what’s specifically being conveyed by color. I highly recommend Geri Coady’s book, Color Accessibility Workflows; it’s a fantastic resource. In it, she discusses color blindness, choosing appropriate color, compliance and testing, implementation, providing alternatives, and she includes some tips and tricks.Don’t assume, and be careful what you ask Do not assume which colors are difficult to see—actually do the research and testing. At minimum, please check the color contrast in your layout.The reason I say that is because although the ADA doesn’t call out color blindness specifically, it does call out visual disabilities. In the U.S., it is illegal in the workplace (not to mention insulting and unwise) to ask people if they have a disability. In my book, that also applies to color blindness, and while it may not be illegal to ask in non-work contexts, it is definitely personally intrusive. However, if people volunteer to help you with your testing and they offer up that information about themselves, that’s a different matter. It may also be a good idea to reach out to some companies that specialize in user testing with people with disabilities. Companies such as Level Access help organizations incorporate accessibility into their daily workflows. They offer tailored training, auditing services, document remediation, and other services to help organizations achieve—and maintain—compliance with Section 508 and the WCAG.Test with colorblind simulators AND colorblind usersDon’t rely on colorblind simulators alone. I could write an essay about this topic. Those simulators are not accurate enough to give you a proper understanding of color vision deficiencies.Seek out first-hand perspectives Actually speak to someone who has a color vision deficiency to get their perspective, and listen with an open mind. I can’t recommend this enough. There is no better way to get an understanding of what it’s like to live with a CVD than to hear about it first hand.Stand up for coworkers and usersDon’t make light of color vision deficiencies. It’s difficult enough living with it, let alone being an artist with it or trying to make sense of information you literally can’t see.Tools and further readingAccounts on Twitter @[email protected]@WeTheColorBlindUsability and UXThe Myths of Color Contrast Accessibility — UX MovementResources for Designing for the Colorblind — We Are ColorblindThe WebAIM MillionWebAIM Contrast CheckerOrganizational resourcesColor-Blindness.com ColourBlindAwareness.orgOurWorldinData.orgColor perception and the brainChromatic adaptationColor constancy Nocturnal color vision Spectral colorContinuing to make progressLoving design is something that has always come naturally to me; I didn’t have to force myself down this path. Growing up, I didn’t know that I wanted the exact job that I have, but by the time I graduated high school in 2000, I knew that I wanted to combine my passions for art and computers. I’m thankful to have been around long enough to have watched the web community evolve into what it is today. I’m thankful for all the tools that exist to help me do what I love in spite of my color vision deficiency. I’m thankful that color blindness is recognized by the WCAG, and that considerations are made for people living with color vision differences.There is a lot of information out there, and I recommend that people go out and read as much as they can on the topic. If you’re on Twitter, then follow people who have a CVD, or the organizations that deal with it in various ways. There is so much knowledge that can be gained by doing some simple research and adding it into your workflow.
  1. accessibility
When I first traveled to Japan as an exchange student in 2001, I lived in northern Kyoto, a block from the Kitayama subway station. My first time using the train to get to my university was almost a disaster, even though it was only two subway stops away. I thought I had everything I needed to successfully make the trip. I double- and triple-checked that I had the correct change in one pocket and a computer printout of where I was supposed to go in the other. I was able to make it down into the station, but then I just stood at a ticket machine, dumbfounded, looking at all the flashing lights, buttons, and maps above my head (Fig 5.1). Everything was so impenetrable. I was overwhelmed by the architecture, the sounds, the signs, and the language. Fig 5.1: Kyoto subway ticket machines—with many line maps and bilingual station names—can seem complicated, especially to newcomers. My eyes craved something familiar—and there it was. The ticket machine had a small button that said English! I pushed it but became even more lost: the instructions were poorly translated, and anyway, they explained a system that I couldn’t use in the first place. Guess what saved me? Two little old Japanese ladies. As they bought tickets, I casually looked over their shoulders to see how they were using the machines. First, they looked up at the map to find their desired destination. Then, they noted the fare written next to the station. Finally, they put some money into the machine, pushed the button that lit up with their correct fare, and out popped the tickets! Wow! I tried it myself after they left. And after a few tense moments, I got my ticket and headed through the gates to the train platform. I pride myself on being a third-culture kid, meaning I was raised in a culture other than the country named on my passport. But even with a cultural upbringing in both Nigeria and the US, it was one of the first times I ever had to guess my way through a task with no previous reference points. And I did it! Unfortunately, the same guesswork happens online a million times a day. People visit sites that offer them no cultural mental models or visual framework to fall back on, and they end up stumbling through links and pages. Effective visual systems can help eliminate that guesswork and uncertainty by creating layered sets of cues in the design and interface. Let’s look at a few core parts of these design systems and tease out how we can make them more culturally responsive and multifaceted. Typography If you work on the web, you deal with typography all the time. This isn’t a book about typography—others have written far more eloquently and technically on the subject. What I would like to do, however, is examine some of the ways culture and identity influence our perception of type and what typographic choices designers can make to help create rich cross-cultural experiences. Stereotypography I came across the word stereotypography a few years ago. Being African, I’m well aware of the way my continent is portrayed in Western media—a dirt-poor, rural monoculture with little in the way of technology, education, or urbanization. In the West, one of the most recognizable graphic markers for things African, tribal, or uncivilized (and no, they are not the same thing) is the typeface Neuland. Rob Giampietro calls it “the New Black Face,” a clever play on words. In an essay, he asks an important question: How did [Neuland and Lithos] come to signify Africans and African-Americans, regardless of how a designer uses them, and regardless of the purpose for which their creators originally intended them? (http://bkaprt.com/ccd/05-01/) From its release in 1923 and continued use through the 1940s in African-American-focused advertising, Neuland has carried heavy connotations and stereotypes of cheapness, ugliness, tribalism, and roughness. You see this even today. Neuland is used in posters for movies like Tarzan, Jurassic Park, and Jumanji—movies that are about jungles, wildness, and scary beasts lurking in the bush, all Western symbolism for the continent of Africa. Even MyFonts’ download page for Neuland (Fig 5.2) includes tags for “Africa,” “jungle fever,” and “primitive”—tags unconnected to anything else in the product besides that racist history. Fig 5.2: On MyFonts, the Neuland typeface is tagged with “Africa”, “jungle fever”, and “primitive”, perpetuating an old and irrelevant typographic stereotype (http://bkaprt.com/ccd/05-02/). Don’t make, use, or sell fonts this way. Here are some tips on how to avoid stereotypography when defining your digital experiences: Be immediately suspicious of any typeface that “looks like” a culture or country. For example, so-called “wonton” or “chop-suey” fonts, whose visual style is thought to express “Asianness” or to suggest Chinese calligraphy, have long appeared on food cartons, signs, campaign websites, and even Abercrombie & Fitch T-shirts with racist caricatures of Asians (http://bkaprt.com/ccd/05-03/). Monotype’s website, where you can buy a version called Mandarin Regular (US$35), cringingly describes the typeface’s story as “an interpretation of artistically drawn Asian brush calligraphy” (Fig 5.3). Whether or not you immediately know its history, run away from any typeface that purports to represent an entire culture. Fig 5.3: Fonts.com sells a typeface called Mandarin Regular with the following description: “The stylized Asian atmosphere is not created only by the forms of the figures but also by the very name of the typeface. A mandarin was a high official of the ancient Chinese empire” (http://bkaprt.com/ccd/05-04/). Support type designers who are from the culture you are designing for. This might seem like it’s a difficult task, but the internet is a big place. I have found that, for clients who are sensitive to cultural issues, the inclusion of type designers’ names and backgrounds can be a powerful differentiator, even making its way into their branding packages as a point of pride. The world wide webfont Another common design tool you should consider is webfonts—fonts specifically designed for use on websites and apps. One of the main selling points of webfonts is that instead of putting text in images, clients can use live text on their sites, which is better for SEO and accessibility. They are simple to implement these days, a matter of adding a line of code or checking a box on a templating engine. The easiest way to get them on your site is by using a service like Google Fonts, Fontstand, or Adobe Fonts. Or is it? That assumes those services are actually available to your users. Google Fonts (and every other service using Google’s Developer API) is blocked in mainland China, which means that any of those nice free fonts you chose would simply not load (http://bkaprt.com/ccd/05-05/). You can work around this, but it also helps to have a fallback font—that’s what they’re for. When you’re building your design system, why not take a few extra steps to define some webfonts that are visible in places with content blocks? Justfont is one of the first services focused on offering a wide range of Chinese webfonts (http://bkaprt.com/ccd/05-06/). They have both free and paid tiers of service, similar to Western font services. After setting up an account, you can grab whatever CSS and font-family information you need. Multiple script systems When your design work requires more than one script—for instance, a Korean typeface and a Latin typeface—your choices get much more difficult. Designs that incorporate more than one are called multiple script systems (multiscript systems for short). Combining them is an interesting design challenge, one that requires extra typographic sensitivity. Luckily, your multiscript choices will rarely appear on the same page together; you will usually be choosing fonts that work across the brand, not that work well next to one another visually. Let’s take a look at an example of effective multiscript use. SurveyMonkey, an online survey and questionnaire tool, has their site localized into a variety of different languages (Fig 5.4). Take note of the headers, the structure of the text in the menu and buttons, and how both fonts feel like part of the same brand. Fig 5.4: Compare the typographic choices in the Korean (http://bkaprt.com/ccd/05-07/) and US English (http://bkaprt.com/ccd/05-08/) versions of SurveyMonkey’s Take a Tour page. Do the header type and spacing retain the spirit of the brand while still accounting for typographic needs? Some tips as you attempt to choose multiscript fonts for your project: Inspect the overall weight and contrast level of the scripts. Take the time to examine how weight and contrast are used in the scripts you’re using. Find weights and sizes that give you a similar feel and give the page the right balance, regardless of the script. Keep an eye on awkward script features. Character x-heights, descenders, ascenders, and spacing can throw off the overall brand effect. For instance, Japanese characters are always positioned within a grid with all characters designed to fit in squares of equal height and width. Standard Japanese typefaces also contain Latin characters, called romaji. Those Latin characters will, by default, be kerned according to that same grid pattern, often leaving their spacing awkward and ill-formed. Take the extra time to find a typeface that doesn’t have features that are awkward to work with.Don’t automatically choose scripts based on superficial similarity. Initial impressions don’t always mean a typeface is the right one for your project. In an interview in the book Bi-Scriptual, Jeongmin Kwon, a typeface designer based in France, offers an example (http://bkaprt.com/ccd/05-09/). Nanum Myeongjo, a contemporary Hangul typeface, might at first glance look really similar to a seventeenth-century Latin old-style typeface—for instance, they both have angled serifs. However, Nanum Myeongjo was designed in 2008 with refined, modern strokes, whereas old-style typefaces were originally created centuries ago and echo handwritten letterforms (http://bkaprt.com/ccd/05-10/). Looking at the Google Fonts page for Nanum Myeongjo, though, none of that is clear (Fig 5.5). The page automatically generates a Latin Nn glyph in the top left of the page, instead of a more representative Hangul character sample. If I based my multiscript font choices on my initial reactions to that page, my pairings wouldn’t accurately capture the history and design of each typeface. Fig 5.5: The Google Fonts page for Nanum Myeongjo shows a Latin character sample in the top left, rather than a more representative character sample. Visual density CSS can help you control visual density—how much text, image, and other content there is relative to the negative space on your page. As you read on, keep cultural variables in mind: different cultures value different levels of visual density. Let’s compare what are commonly called CJK (Chinese, Japanese, Korean) alphabets and Latin (English, French, Italian, etc.) alphabets. CJK alphabets have more complex characters, with shapes that are generally squarer than Latin letterforms. The glyphs also tend to be more detailed than Latin ones, resulting in a higher visual density. Your instinct might be to create custom type sizes and line heights for each of your localized pages. That is a perfectly acceptable option, and if you are a typophile, it may drive you crazy not to do it. But I’m here to tell you that­ when adding CJK languages to a design system, you can update it to account for their visual density without ripping out a lot of your original CSS: Choose a font size that is slightly larger for CJK characters, because of their density. Choose a line height that gives you ample vertical space between each line of text (referred to as line-height in CSS). Look at your Latin text in the same sizes and see if it still works. Tweak them together to find a size that works well with both scripts. The 2017 site for Typojanchi, the Korean Typography Biennale, follows this methodology (Fig 5.6). Both the English and Korean texts have a font-size of 1.25em, and a line-height of 1.5. The result? The English text takes up more space vertically, and the block of Korean text is visually denser, but both are readable and sit comfortably within the overall page design. It is useful to compare translated websites like this to see how CSS styling can be standardized across Latin and CJK pages. Fig 5.6: The 2017 site for Typojanchi, the Korean Typography Biennale, shows differing visual density in action. It is useful to compare translated websites like this to see how CSS styling can be standardized across Latin and CJK pages (http://bkaprt.com/ccd/05-11/). Text expansion factors Expansion factors calculate how long strings of text will be in different languages. They use either a decimal (1.8) or a percentage (180%) to calculate the length of a text string in English versus a different language. Of course, letter-spacing depends on the actual word or phrase, but think of them as a very rough way to anticipate space for text when it gets translated. Using expansion factors is best when planning for microcopy, calls to action, and menus, rather than long-form content like articles or blog posts that can freely expand down the page. The Salesforce Lightning Design System offers a detailed expansion-factor table to help designers roughly calculate space requirements for other languages in a UI (Fig 5.7). Fig 5.7: This expansion-factor table from Salesforce lets designers and developers estimate the amount of text that will exist in different languages. Though dependent on the actual words, such calculations can give you a benchmark to design with content in mind (http://bkaprt.com/ccd/05-12/). But wait! Like everything in cross-cultural design, nothing is ever that simple. Japanese, for example, has three scripts: Kanji, for characters of Chinese origin, hiragana, for words and sounds that are not represented in kanji, and katakana, for words borrowed from other languages. The follow button is a core part of the Twitter experience. It has six characters in English (“Follow”) and four in Japanese (フォロー), but the Japanese version is twenty percent longer because it is in katakana, and those characters take up more space than kanji (Fig 5.8). Expansion tables can struggle to accommodate the complex diversity of human scripts and languages, so don’t look to them as a one-stop or infallible solution. Fig 5.8: On Twitter, expansion is clearly visible: the English “Follow” button text comes in at about 47 pixels wide, while the Japanese text comes in at 60 pixels wide. Here are a few things you can do keep expansion factors in mind as you design: Generate dummy text in different languages for your design comps. Of course, you should make sure your text doesn’t contain any unintentional swearwords or improper language, but tools like Foreign Ipsum are a good place to start getting your head around expansion factors (http://bkaprt.com/ccd/05-13/).Leave extra space around buttons, menu items, and other microcopy. As well as being general good practice in responsive design, this allows you to account for how text in your target languages expands.Make sure your components are expandable. Stay away from assigning a fixed width to your UI elements unless it’s unavoidable.Let longer text strings wrap to a second line. Just ensure that text is aligned correctly and is easy to scan.