Primary font: Aeonik

Typography is an essential element of our identity and a powerful tool for
achieving consistent expression in our communication.

Aeonik is selected for its clean lines and contemporary feel, which align
with the SOROS vision of clarity and efficiency. It reflects our commitment
to creating a user experience that’s not only visually appealing but also
inherently functional and accessible.

Use the right font for the job

For our products, we have simplified the fonts used within SOROS in order to quickly orient people to the most important information.

Font weight

We have tokens ranging from Light to Extrabold for font weights. However, our system does not use Light or Bold. We have simplified fonts used within the product to better blend layouts and not add confusion to the visual hierarchy.

Font choices in product

The Display font is perfect for those brand moments

We use Aeonik Medium, paired with a set of large font sizes for creating expressive headings and editorial moments.

We use Heading and Title styles for headings and labels

We like to keep type styles consistent for customers to be able to quickly scan content and create visual hierarchy. In order to do so, we only use Medium for headings and labels.

When you have lots to say, use Body Text Regular

In order to create juxtaposition and legibility within our designs, SOROS Regular font weight is used for all body copy. This blends well and gives a nice balance with the headings that are Medium.

Reserve SOROS Label for smaller type

Need to display smaller, supplementary text under an image or add a footnote? For captions, we use smaller SOROS regular font weights to anchor small units of type.

Text and icon colors

Text color tokens are used to define text and icon colors. We’ve created a set of accessible text color tokens to promote legibility and readability to be used on dark and light backgrounds.

Text components

We know how time-consuming it is to fiddle with type styles to get the correct one. This is why we have created type components, so they have style built into them. You can focus on designing full layouts, and we can worry about the nitty-gritty.

Ever wonder why we make the choices we make when it comes to styling type?

Let’s do a small deep dive into some of our favorite tips for typography.

Alignment

When in doubt, flush left

We suggest using a left alignment for styling UI copy in left-to-right languages. This provides a stronger vertical alignment of your design and a better reading experience while seeing the hierarchy of the content. This also makes it easier to scan content, especially for users of screen magnifiers or higher zoom levels.

Do

Don’t

When to center type

We don’t suggest centering large groups of text, it’s not always the most effective in information design and legibility. However, it may make sense within a card or under a data visual or image if it's a small amount of content.

Base alignment

In some instances, it is helpful to bottom align your units of type instead of centering your type. This helps when you have multiple type sizes and gives a unified look. It's that it's easier for humans to scan text content when it's on the same baseline.

Do

Leading (line height)

Leading helps with legibility in your designs. Having leading too tight or too open can be strenuous on the reader. Lucky for you, SOROS already uses the best line-height tokens within our type-based components to have the perfect leading already built in.

Do

Don’t

Case styles

All caps

We recommend avoiding forced capitalization. It’s not accessible with screen readers, and in many languages, does not translate. It also tends to be less legible than sentence case.

Do

Don’t

In almost all cases in SOROS, use sentence case

Tips on when and when not to capitalize:

• Avoid setting a single capitalization design rule that fits all languages.
• In French, Italian, and Spanish (among others) only the first letter should be capitalized for certain words.
• In German, certain types of nouns, gerunds, and names must start with upper-case.

Developers should avoid using CSS, e.g. text-transform: capitalize; to handle capitalization.

Here’s when you do capitalize every word with title case:

• Proper nouns – products, people, places.
• Products include features, programs, or systems that SOROS has given a specific name to.
• If a brand or product name uses a mix of upper and lower case (TwiML, eBay) use the name's convention.
• People - named individuals or identifiable roles.

Text wrap (line length)

We want to create comfortable reading for our customers. We suggest no more than 120 characters per line. When working with line lengths we want to create short, but efficient lines of text, so the content is easier to scan, it's readable, and not overwhelming.

Do

Don’t

It's also good practice to give more padding (space) if your content is within a container. Just like us humans, our type doesn’t like to feel claustrophobic.

Do

Don’t