As business grows beyond borders, enterprise corporations are faced with the dilemma of translation of content. Designing for language is one of the more difficult ventures, especially in line with branding and overall business goals. How do you create designs that stay within branding restrictions that create clear communication of content across languages and cultures?
Create an internationalization section of the design system that includes text styles and other dynamic elements that need to be considered when designing for languages and cultures other than US English.
Role: Lead Strategist & Designer
Tools used: Figma
To understand translations from an English-speaking perspective, it's essential to grasp the concept of diacritics.
Diacritics are marks, such as accents or cedillas, placed above or below a letter to indicate a variation in pronunciation compared to the same letter without a mark or with a different one. They are widely used in many languages, including French, German, Spanish, Italian, Portuguese, Polish, Czech, and Swedish. Below are some examples of diacritics.
à è ù â ê î ô û ü ë ï ñ ç å ø
English has incorporated countless "loanwords"—terms adopted from other languages into its lexicon. However, when writing these words in English, we often omit the diacritics present in their original forms. Examples include souvenir, entrepreneur, and restaurant. There are exceptions, such as fiancé or jalapeño, where diacritics are retained.
While English is often considered the international language of business, UX design must account for a diverse range of languages and cultural contexts. With a focus on user-centric design and a growing global audience, it is our responsibility to create designs that are inclusive and adaptable. Establishing best practices that accommodate linguistic diversity lays a strong foundation for an ever-evolving digital landscape.
After identifying the languages and character sets our designs needed to support, I began experimenting with diacritics using Figma and Google Developer Tools. The goal was to test how these characters functioned within our existing branding and design system. One significant challenge was that our team had no authority to alter the company’s branding, as branding decisions fell outside our scope. Instead, our responsibility was to align the digital landscape—including the website and other products—with the established brand.
The brand guidelines specified Oswald Semi-Bold in all caps as the main heading style. This posed several issues with diacritics, particularly at the current text size and line height defined within the design system. Adjusting these parameters while adhering to brand requirements became a key focus of the project.
Using the original text styles defined by the brand as a foundation, I worked within the existing font sizes and line spacing to develop a solution. Additionally, creating dynamic text styles was essential to ensure compatibility with development requirements and to establish best practices for future updates. The core principles for the internationalization of text include:
The globalization of digital products is now a reality for enterprise corporations worldwide. It is crucial for UX designers to account for translations when developing brand and digital standards. Moreover, prioritizing internationalization within design systems should be a key objective as we progress further into the 21st century. By embracing these principles, we can create inclusive, user-centered designs that resonate with diverse audiences across the globe.
