The Typography of Atlus USA

Shin Megami Typeface

Ridwan
Ridwan Khan

--

A few weeks ago, I took a look at the UX of Atlus’s latest RPG, Persona 5. One of the most interesting parts of that article was the discussion about the U.S. version’s typography. Some great comments led me to think about Atlus’s typography choices in other U.S. localizations, and to the explorations below.

In order to investigate typography in Atlus USA’s games, I picked a few titles that I’m relatively familiar with. This isn’t meant to be a complete catalogue of Atlus USA’s (sizable) output. Additionally, while it’s not directly related to the in-game UX, I also discussed typography on game box art. Primarily, I just thought that art was interesting. But it’s clear that the game art, especially the logo, often ties into themes or elements in UX.

I’m hoping both designers and game players get something out of this article. Therefore, I’ll explain some basic typographic terms in the course of this article. Feel free to skip my very basic explanations, experienced design hands. If you need a definition of typography, check out this explanation by one of my favorite type-nerds, Matthew Butterick, at PracticalTypography.com

Finally, speaking of non-designers, some video game players may be asking why typography matters in video games. “If I can read the text, isn’t that good enough?” Butterick explains that bad typography exhausts reader patience. Good typography makes it easier for the reader to understand the underlying message. Bad typography obfuscates it. You might back out of a web site if the colors make the text hard to read, or you may delete an email from Uncle Jim without reading it, if it’s written in bright green Comic Sans or Papyrus.

In a game, perhaps the player will simply quit playing. Even if the player soldiers on with bad typography, though, it can negatively impact their enjoyment. We’ve all played games that where the dialogue text was too small or the menus didn’t create a logical hierarchy. Recall the irritation you felt in those situations. Conversely, good design engages players. Don’t believe me? Look at the articles written about Persona 5’s UI.

Keep in mind, our discussion of typography isn’t simply about choosing fonts. Instead, it’s the exploration of how game designers use (or don’t use) text to make dialogue engaging, menus easier to understand, and reinforce elements of the game’s theme or art. Google elaborates on this principle in describing its design language, Material Design.

The foundational elements of print-based design — typography, grids, space, scale, color, and use of imagery — guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus. An emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user.

The elements of design, including elements of typography, help guide the player in a game the way Google describes. When it works, the game surfaces critical functionality and makes play easier for the player. In short, the player spends less energy figuring out menus and more energy being drawn into the game.

Tactics Ogre (Playstation, 1997)

When first outlining this article, I didn’t even consider including the 1997 game Tactics Ogre. That’s despite its PSP re-release, 2011’s Wheel of Fate, being one of my all-time favorite games. I didn’t realize Atlus worked on the original localization because in 2002 Square-Enix bought the game’s developer, Quest. Wheel of Fate was subsequently released through the new company.

The Japanese (L) and U.S. box art for Tactics Ogre

There are many differences between the Japanese and U.S. versions of the game. The Tactics Ogre logo uses the same font on both covers, but the Japanese version is more subtle, and more beautiful. The bright gold and metallic effect shouts out “swords and fantasy” at full volume. Quest could have put that same logo on a black background and I’m sure most people would still have understood what the game was about.

The logo also uses a blackletter or gothic script. By using characters that resemble highly stylized gothic type, Tactics Ogre strongly proclaims its heritage in Western fantasy tropes. The text gives the impression of being old and European.

Examples of blackletter, or gothic Latin typefaces from Wikipedia

Back Channel discusses this a little more in depth.

Blackletter looks esoteric and illegible now, but it started off as a normal pattern that people across Europe used every day for hundreds of years. It stayed that way until pretty recently. A third of the original fonts at Monotype, the American company behind classics like Times New Roman and Gil Sans, were blackletter.

The Back Channel goes on to discuss that blackletter is not commonly used now because of its connections to Nazi Germany. However, the typeface is still seen when a product wants to evoke a sense of medieval Europe (whether fantasy games like Tactics Ogre or metal albums), or even a sense of age and trustworthiness, like many newspapers mastheads.

Variations on the Tactics Ogre logo
This cover of Joe Abercrombie’s The Blade Itself (a great fantasy novel!) is in a gothic typeface
Newspapers, including the New York Times and the Washington Post, use blackletter for their masthead logo

Underneath the logo in simple white katakana “Tactics Ogre” is written out in phonetic Japanese (literally takutikusu ouga). Japanese media often use English to sound foreign or hip (think about the use of French in the U.S. for an analogy). This Japanese game’s use of an English title clearly recalls the tradition of Western fantasy. However, some Japanese readers may not be able to read the English “Tactics Ogre,” hence the need for the pronunciation guide. We’ll look at this guide in more depth later. For now, suffice to note despite being close to the text, it’s not part of the logo.

Finally, beneath the logo and the katakana spelling, in a serif face is the game’s subtitle, “Let Us Cling Together,” one of many Queen references throughout the series. It may be difficult to tell from the image on Medium, but the the face is a really clean looking serif. Even though the font is much smaller than the Tactics Ogre logo, it’s very readable. The dark gold/brown ties it to the larger logo, without attracting too much attention or overpowering the main logo.

All three pieces of text work well together. The Tactics Ogre logo isn’t the easiest typeface to read (imagine trying to read a novel set in it). Here, however, the typeface is big enough to be easy understood. The color and design conveys information about the game, and attracts your attention. The beautiful shine draws the you into the art. As your eyes move down from that logo you catch the pronunciation guide and the subtitle. There’s a clear hierarchy for all three pieces, conveyed well through size, position, and even color.

The English version, on the other hand, uses a sort-of bronze color, without the metallic embellishments. It also uses grey drop shadow, perhaps to evoke smoke. I don’t like this version much. It’s not inviting or exciting. You can’t tell it’s a fantasy logo immediately. It’s actually a pretty neat lesson in how relatively subtle shifts in color can change the tone of a work.

Underneath the logo text is another logo — that for the the Ogre Battle series, likely to capitalize on the modest success of March of the Black Queen. The Ogre Battle typeface looks similar to, but isn’t, the one for Tactics Ogre. The former, though is consistent across the series, as you can see below.

Interestingly, the U.S. release of Tactics Ogre uses the Ogre Battle logo, shown here on Ogre Battle: The March of the Black Queen (1993), while the Japanese version doesn’t

There are a number of issues in using the Ogre Battle logo on the U.S. box. First, it breaks some of the hierarchy of the text. Unlike the subtitle on the Japanese box art, it’s remarkably distracting, especially in blood red with a bright white stroke. Red immediately gets our attention (see the March of the Black Queen box above) and so on the Tactics Ogre box it pulls attention away from already boringly colored text.

It’s also very close to Tactics Ogre logo in space, even closer than the subtitle in the Japanese art. I think the legibility is worse because of that proximity, and it suggests a relationship between the two lines (as does the text “series” which is the same color as the Tactics Ogre logo). The box is relatively empty, and the “Ogre Battle series” text likely could have been placed elsewhere.

Moving on from the box art, let’s check out the in game text.

The name entry screen at the beginning of the game — The Japanese version allows entry in hiragana, katakana, English letters, and kanji
Dialogue from the Japanese version of Tactics Ogre
The same scenes in the English version of the game

There’s a lot of dialogue in Tactics Ogre, and as we move into the game itself, it’s apparent that Quest and Atlus made some really good choices here. It’s relatively low def — even the Playstation version is really just a simple port of a Super Nintendo game — but the dialogue is both legible and readable, for a number of reasons.

As a refresher, legibility refers to whether the reader can read the text — can they make out and distinguish the characters. Readability, on the other hand, is how much the reader wants to read the text. Does the formatting and presentation draw the reader in and make them care about reading the text?

Tactics Ogre’s dialogue text does well in both aspects. The game presents game dialogue in large modal dialogue boxes, with three lines of text to each box. The dialogue boxes are large, and nicely set off the text from the surrounding in-game action, through color and a simple drop shadow. The pale beige of the boxes also suggest parchment, further echoing the game’s the sword-and-magic fantasy setting. Even the dialogue box tail, which makes the modal look like a comic book word bubble, helps tie that dialogue firmly onto the onscreen action. These modals do take up a lot of space, especially considering the low resolution of the screens. However smaller text would be harder to read.

The low numbers of text lines is pretty standard in RPGs — we’ll see two or three lines in all the screenshots in this article. Any more, and the dialogue would overpower the action on-screen. That does mean the player has to click through a lot of text, but pressing a button on the control-pad doesn’t really require the player to think to deeply about what they’re doing. Many games even have an icon for when the player should press to move to the next lines of dialogue. In Tactics Ogre we can see this is actually a finger pressing a button!

The character art — designed by Hiroshi Minagawa, and the incomparable Akihiko Yoshida — draws the player into the text as well. It works especially well when multiple characters are “speaking” as in the Japanese screenshots above. These kind of flourishes engage the player, making her want to read the text.

In fact, keeping in mind advancements in technology over twenty years, the way text is set off in this game is very reminiscent of Persona 5. While there’s almost certainly no direct influence here, it’s interesting to note how good design decisions can lead to striking parallels.

Nearly twenty years later, Persona 5 made similar design decisions as Tactics Ogre for character dialogue

Unlike Persona 5 though, I’m a fan of both the Japanese and English typefaces. The Japanese typeface is clearly doing some heavy lifting in representing complex kanji characters on a relatively low-fi screen resolution. It’s also a little quirky (the longer upward line on the second stroke in カ for example), which I think adds to the charm. It can look a little cramped, though I think this often happens in Japanese, and the natural rhythm of kanji and non-kanji characters helps break up the text.

The English typeface keeps some of the feel of the Japanese original, but not to the detriment of its own legibility. For example, the spacing is wider in the English version, which really helps. The serifed font the game uses for dialogue doesn’t seem out of place for the game’s setting, but it also doesn’t call too much attention to itself. I could see the typeface being used in a fantasy setting, but it’s not cloyingly Medieval Times either (again, imagine if the Tactics Ogre logo font were used for all this dialogue text!).

The English typeface in Tactics Ogre is free from all fancy business

The characters themselves are easily distinguishable, and the counterspaces are very distinct (check out the counterspaces, particularly the “e,” in the word “one”). While it’s clearly a different typeface, the English font used here reminds me of Eric Gill’s Joanna (one of my favorites), which he described as “a book face free from all fancy business.” Considering the large amount of dialogue in the game, it’s a joy.

A quick explanation of serif and sans serif fonts. Serif fonts, in Latin alphabet and Chinese characters (which are used in Japanese), are characters with extra lines on the end of a stroke. Some examples are highlighted in red below, in images from Wikipedia. Serifs stem from early forms of creating the characters; the Latin alphabet from when the letters were carved into stone. The serif forms of Chinese characters come from wood block printing.

Speaking generally, serifs are considered easier to read. The extra lines can make it easier to differentiate characters, particularly when characters may look similar as san serifs (uppercase “I” and lowercase “L” can look the same in some sans serif typefaces, for example). Many serif fonts also have large x-heights (essentially taller lowercase characters), which are easier to read. Type nerds also often think that serif fonts are easier to read (left to right, anyway), because they help the eyes move horizontally, which in turn can help the reader engage, understand, and remember the text.

Therefore, in English we tend to use serif fonts for long sections of text (articles, books), while sans serifs are used for headlines. Recall writing essays in Word as a kid, and using Times New Roman (a serif) for the body, and Arial or Helvetica (sans serifs) for section headings. That mandate was this principle in action. This isn’t a hard and fast rule, though as we’ll see in other games. Actually, because dialogue text in most RPGs is limited to a few lines at a time, sans serifs are often a good choice for dialogue boxes.

The difference between serif and sans serif fonts in Roman type as well as Chinese characters (used in Chinese and Japanese), shamelessly stolen from Wikipedia

Interestingly, the English localization keeps the 「Japanese style」 brackets for dialogue rather than using [English ones], probably to differentiate names from dialogue. I think the Japanese brackets are better for this task than the English ones, especially since we don’t use them that commonly or for that purpose in English anyway. The player will likely intuit what they mean, but using smart quotes here may have been more obvious. Alternatively, the game could have simply not used brackets at all. The dialogue boxes (particularly the tail) and character portraits make it clear this text is spoken.

Both versions also use a slight drop shadow on the text as well. Normally, I’m not a fan, but here it’s used sparingly. It also gives a bit of texture, but making the text seem a little more three-dimensional.

Even today Tactics Ogre’s dialogue boxes look great, which is important for a game where much of the action occurs through dialogue. The serifed font is legible, and subtly fits the fantasy setting. The dialogue boxes set the text off from other on-screen action and increase readability, as do the character portraits.

There is an issue with the dialogue typeface when it’s blown up though, if you’re playing it on a modern TV screen or monitor, rather than the CRT TVs it was designed for. The text looks too thin and the drop shadow is overly distracting in those situations. That said, it’s hard to fault a decades-old game for advances in display tech.

Tactics Ogre was re-released in 2011 for the Sony PSP as Tactics Ogre: Wheel of Fate (released in the U.S. as Let Us Cling Together). The new version of the game totally overhauls the dialogue boxes, but interestingly keeps many of the the original’s best elements. Wheel of Fate retains the focus on character art, the parchment paper background, and the dialogue box tails. The updated Japanese face even has a few quirks as well (note the connecting line in ”い,” which looks like brush or pen writing). In the Japanese version, at least, dialogue takes advantage of advancements in technology while using elements from the original to remain compelling and readable.

Screenshots from the 2011 Tactics Ogre remake, Wheel of Fate

Inexplicably the English version uses all caps oblique font, SO THE CHARACTERS LOOK LIKE THEY ARE YELLING WHILE RUNNING. Both the font and the use of all caps make it difficult to read. These decisions make the game’s text less legible for no good reason. It’s possible that the localizers thought that the player will be close to the screen (the PSP is a mobile device), but that’s not a good enough reason. Plus the game is now playable on TVs via the Playstation 3 and PSTV as well, so players sit further from the screen anyway. Luckily for us, however, that’s Square Enix’s problem, not Atlus’s, so we’re not concerned with it now.

Shin Megami Tensei: Nocturne (Playstation 2, 2004)

Jumping to the Playstation 2, we come to the third entry in Atlus’s signature series, Shin Megami Tensei. I’ve only played a bit of the game but I wanted to include it because it marks a few major changes for Atlus. First, as the first Shin Megami Tensei game in nearly ten years, the developers used the game as a means to try out 3D graphics, discard the first-person perspective that defined the series, and re-establish the series’s ties to a contemporary, real-world setting. Appropriately, the game’s narrative themes revolve around dramatic change after a period of stagnation.

The title marked a change for Atlus USA as a localizer as well. Previous Atlus games (the first Persona titles, for example), were often highly edited when brought over to the U.S. However, with SMT3, Atlus decided to, as far as possible, stay close to the Japanese original.

Comparing the original (left) and re-release Maniac’s version (center) of the Japanese Nocturne with the US release (right)

That emphasis on fidelity to the Japanese original is first reflected in the game’s cover art. The covers are roughly similar, though the U.S. version zooms in a little closer. The Japanese versions place the Shin Megami Tensei III: Nocturne logo in the middle of the box art. Note the kanji typeface used on the logo is a serif. The English logo incorporates it as well, though in a font so small it’s like Atlus USA was embarrassed by it.

The Shin Megami Tensei logo, with prominent serifs on its Chinese characters — it literally translates to “True Rebirth of the Goddess”

The U.S. version spells out Shin Megami Tensei in English with a thin sans serif, spread out over the game’s subtitle. I’m not a fan. The logo lacks personality, despite the quirky “G.” Perhaps Atlus tried to fix the blandness by using drop caps, but it doesn’t really add much. It’s also generic, like someone just typed something out in a commercial font, rather than being created from scratch or even modified from an existing typeface.

Despite those issues, the English logo was used for the U.S. releases of subsequent Shin Megami Tensei games (we’ll see Shin Megami Tensei IV below) and even games that weren’t part of the series in Japan, notably sister series Persona. Likely, by including the logo Atlus USA hoped to capitalize on the popularity of Nocturne. The Shin Megami Tensei logo on the Persona games uses a white outline or white drop shadow, probably to try to match the Persona 3 and Persona 4 logos. I’m not a huge fan of either outline, though it’s necessary for the text to show up at all on the art. Nocturne’s simpler version is better.

Atlus USA continued to use the Shin Megami Tensei logo on Persona games, though they weren’t part of that series in Japan — even Koei’s PAL release of Persona 3 (center) includes the logo

Moving to the subtitle, the Japanese and English versions use the same font for the Nocturne text, but the Japanese versions match the color of the SMT logo text. The English version adds an obnoxious 3D effect and white outer-stroke, which to me looks more busy than attractive. The Japanese version is stark and simple, which reflects the underlying narrative.

A familiar face — Jack Frost in SMT3

In the screenshots above, the game uses the same chunky sans serif typeface for the demon descriptions, much of the battle UI text, and dialogue. Nocturne also uses stroke outlines to good effect — either black or purple outlining white text, so that the text pops off the action it overlays. That purple motif runs through other parts of the UI.

That said, the sans serif is definitely less legible than, say the serif font used by Tactics Ogre. Even in the above screenshots, it’s definitely more difficult to differentiate individual characters. This isn’t text you can just glance over.

However, as the primary font in the game, the chunky purple-outlined sans serif fits the game’s themes. It parallels the game’s three-dimensional cel-shaded graphics, particularly Kazuma Kaneko’s smooth, androgynous character designs. Designs for the game’s protagonist also suggest a technological or digital aspect to his character, which also is subtly reflected in the colder sans serif. In the same way the serif font in Tactics Ogre both fits and supports that game’s medieval fantasy setting and themes, the use of the sans serif in Nocturne does the same, though in a starkly different cyberpunk-esque setting. Even the purple outlining subtly reinforces those themes of ambiguity and technology.

Plus, as a narrative-driven RPG, ideally, the player isn’t just glancing over the text, but rather actively engages with it. Perhaps the lower legibility of the English sans serif isn’t as big a concern. And as we mentioned above, there aren’t large chunks of sans serif text, as the dialogue boxes are limited to three lines each. The longest stretches of text are things like demon descriptions, which are short paragraphs.

Kaneko’s androgynous designs, particularly for the main character, pictured here, seem to also be reflected in the choice of a smooth, wide sans serif typeface

Also unlike Tactics Ogre, Nocturne doesn’t use modal boxes to offset dialogue. Instead, the text directly overlays the onscreen action, over a darkened translucent rectangular blur. One impact of this choice is that the text requires those black and purple outlines. Otherwise, it would be highly illegible on the game screen. Moreover, without the word balloon tails we saw in Tactics Ogre and Persona 5, the dialogue text in Nocturne loses some UI ornamentation.

English dialogue from Nocturne

There are benefits, however, to the removal of those modals. The text lies directly on the action. Shorn of decoration, Nocturne feels direct and stark, like the semi-naked protagonist pictured above. The game’s plot involves destruction and rebirth, gods, demons, the human psyche and morality, all on a cosmic level. It doesn’t seem inappropriate that that directness is reflected in the dialogue as well.

A battle screen from Nocturne

In addition to the primary font, others are used (sparingly) in the UI, often to create a sense of hierarchy. Typographic hierarchy uses individual typefaces, families, sizes, position, colors, weights and other typographic elements to create an order of importance in the text. This logical ordering it easier for the reader to understand what is most important and to navigate levels of text. Hierarchy is clearly important in video games, especially menu-based games like RPGs, as it helps the player understand what information is important and how to navigate screens and menus.

The battle screenshot above shows how Nocturne creates hierarchy in the game’s UI. The FIGHT text is clearly the top-level navigation for the menu in the left corner. It’s in a drop-capped serif font and within a heading box. The commands underneath it, “Bullet-Time,” “Stinger”, “Showtime”, and “Pass,” as well as the associated MP or HP costs, (figuratively) fall under that menu because they (literally) fall under it. These secondary commands are also are in the UI-standard sans serif font, smaller than the heading, and in a regular capitalization.

Likewise, the “PLAYER” text in the upper-right corner also creates a hierarchy. It serves as a heading for turn icons, essentially the number of moves the player has on their turn. This heading changes to “ENEMY” and turns red on the enemy turn, and displays icons representing enemy turns. All of this information is vitally important in the game’s Press-Turn battle system, in which the player (or enemies) can earn extra turns by exploiting an opponent’s weaknesses.

Screenshots from the Japanese version of Nocturne

The Japanese version of the game keeps the purple-white text, but doesn’t use a sans serif font. Instead, in what I think is likely a nod to series tradition, it uses a font that looks similar to the Shin Megami Tensei logo text. Interestingly, Nocturne was the first SMT game to be released in the U.S., so while the Japanese version had an established history to draw upon (or was beholden to), the U.S. version was able to start with a fresh slate. Perhaps that’s another reason why the U.S. version went with the sans serif.

Note too that the serif English font used in the Player and Fight text, aren’t localizations, but rather come from the Japanese original. The sharp contrast they provide with the English san serif seems to be a happy coincidence.

I’m torn by the two design decisions here. I think the serif font the Japanese version is more legible, especially for large amounts of text. Indeed, this may have even been necessary, considering the large amount of dialogue and more complex kanji in this game. That the text also resembles the Japanese logo may also be important for Japanese fans of the series.

That said, it’s good that Atlus USA didn’t feel bound to try and imitate the choices the Japanese developers made. The visual complexity of English and Japanese are different. Therefore it’s better that the English localization strike out on its own, rather than try to poorly imitate the Japanese original (hello again, Persona 5!). While the sans serif is less legible than the Japanese font, it also fits the context of the game very well. It captures the cyberpunk sci-fi setting of the game and it reflects the smooth, ambiguous game art and character design. And as we mentioned, we’re not reading a novel on a page, but short lines of dialogue, negating some of the benefit of using a serifed typeface. It’s possible Atlus USA could have fixed legibility a bit by using a sans serif in which the characters, particularly the lower-case letters, were a little more differentiated, but overall there are a lot of good reasons for the type choices in Nocturne.

Persona 4: The Golden (PS Vita, 2012)

Like Tactics Ogre: The Wheel of Fate, 2012’s Persona 4: The Golden is a mobile re-release of an older game, in this case the 2008 Persona 4. It’s also a continuation of Atlus USA’s policy of hewing closer to the Japanese original when localizing, something we’ll see in this game’s typographic choices as well.

The Japanese and U.S. versions of the P4G: The Golden box art

The box art between the two versions is almost identical. The non-Japanese version of the game drops the “the” for more natural sounding English (this is another example of trendy, if awkward English in Japanese).

The Persona 4 The Golden logo — sparkly!

On both versions, the logo text is in a relatively thin serif font on a very busy background. The logo is set off with both the dark black drop shadow and a background fill shape in the game’s signature gold color. Those elements setting it off, plus the large size of the logo, helps make it more legible. The font itself is the same as that of the original release of Persona 4, with the addition of sparkles, which emphasize the subtitle (unlike Shin Megami Tensei though, Persona doesn’t have an overarching series logo).

Note also that Atlus USA finally (thankfully!) dropped the Shin Megami Tensei logo for P4G, as Persona was finally eclipsing SMT outside Japan. Atlus no longer needed to ride Nocturne’s coattails.

The Japanese box art for Persona 3 FES and Persona 4 — unlike Shin Megami Tensei, there’s no logo typeface for the Persona series, but P4G uses a logo similar to the original Persona 4

The black/gold/white color scheme epitomized in the logo is woven throughout the game’s art and UI. This bright, flashy UI emphasizes Persona 4’s optimistic protagonist and narrative. It’s a good example of a game’s logo and UI working together to reinforce design and narrative themes.

Menus in P4G are rounded and stylish

Golden is remarkably consistent with a sans serif font through nearly all of its text. I believe the headings themselves are the same typeface, though the use of the white stroke around them changes the counterspaces and shapes, particularly inside letters like e, o, and a. I don’t like this use of the outline.

A few other things to note on the UI screen below. Like the other text, the stylized numbers are also consistently through the game. Also, the first character in “Next exp” is a dropcap, but also runs into the fill shape for “Chariot Lv 93.”

P4G uses the same typeface through much of the UI and dialogue

Though Golden also uses a sans serif like Nocturne, the dialogue is more legible in this game. The overall concerns with the sans serif remain the same; they are less legible than potential sans serif counterparts. However, dialogue in Golden is set off in boxes, with white text on a dark background. In this game the differing heights and widths of the characters themselves, make them easier to distinguish. Like Tactics Ogre, P4G’s use of the box, character names, and character art draw the reader into the text. The player is engaged and wants to read because of these elements.

Dialogue and battle screens in Japanese — Note the button press icon in the bottom right corner of the dialogue modal as well

The modal Golden uses for dialogue differs from Tactics Ogre or Persona 5, though. There’s no tail indicating a speaker, so the boxes look less like comic book word balloons. They are also very opaque and take up a good deal of the screen. The impact is almost the opposite of Nocturne. The UI here is more present and obvious, but the stylishness of the UI is an important aspect of Persona 4.

Also unlike Nocturne, the U.S. release of Golden’s use of a sans serif matches the Japanese original. In fact, as we’ve seen before, much of the English UI text was in the Japanese original.

Note how the English and Japanese screens use the same typeface in English

If, as a general rule, sans serifs are less legible, and can be cold or impersonal, why choose this sans serif font here? Sans serifs can also look hip and contemporary (recall how Nocturne’s font helped reinforce it’s cyberpunk theme). The menus of Persona 4 are particularly stylish, with round menus, rounded corners on boxes in stat screens and modal dialogue boxes. A stuffier serif font wouldn’t match the theme or those UI elements.

Additionally, while I have no research or studies to back this up, my instinct is that Japanese doesn’t have the same legibility issues in sans serif that English does. The relative complexity of Japanese writing makes individual characters easier to distinguish. The interplay between complex kanji characters and simpler kana “letters” (which also differ between angular katakana and rounded hiragana) breaks up a sentence, even in a sans serif typeface. That natural rhythm doesn’t happen in English because most Latin alphabet characters are of relatively similar complexity.

You can see in this simple example sentence the interplay between kanji and hiragana

Instead of relying on distinctions between serifs and sans serifs (like Nocturne) Golden uses size, color, and outlines to create hierarchy. In the screens below, the heading “Persona” is in large, heavy black text, with white outlining. Additional important information is backfilled with black rectangles, while specific elemental information about the persona is in orange. The most important information in this section, the numbers for each stat, are also in black, and stand out against the orange menu UI and yellow background. Similarly, each persona’s spells are placed on rectangles at the bottom. UI elements explaining the button commands are also in black. Those elements stand out and help balance the screen out as well.

Comparing the Japanese and English menus in P4G

Urbanfont notes that the “best font choices are ones where readers do not notice the font but the message.” For many designers, the guiding principle on type choice is to use the font most readers won’t think about at all. Here, with the stylish, rounded UI the sans serif type was the best choice. It fits so well into the rest of the UI, the vast majority of players won’t even notice it. That both the Japanese and English versions do this further suggests this was a good choice. The only possible criticism is that the sans serif typeface is less legible, but Golden takes many steps to make the UI and dialogue text more legible and readable.

One other interesting note about the English version of Golden. It retains some Japanese language in the UI, particularly when shopping. On the one hand, this use of Japanese language lends verisimilitude for the Japanese setting. And none of the text here is vital, so if the player can’t read it, there’s no major loss. On the other, if the player doesn’t read Japanese, is it really useful to have the kanji for “book” on the bookstore menu or the weapons shop name written out in calligraphy on the weapon shop menu? Many localizers say their goal is to give players in the non-native language the same experience as players in the native language. Since they can’t read the text, I don’t think that’s happening for most English-language players on these screens.

The shopping menu in P4G: Golden feature Japanese text as decoration

Etrian Odyssey 4: Legends of the Titans (3DS, 2013)

Etrian Odyssey (in Japanese, Sekaiju no Meikyu, or Labyrinth of the World Tree) is the first game in this series for Nintendo’s 3DS portable. Like the other games mentioned so far, it’s an RPG, but it’s less focused on narrative. Instead, the gameplay revolves creating a party to explore and map dungeons, while battling enemies and picking up treasure (in this way, it’s similar to many early RPGs). As such, while dialogue text is less vital in the games we’ve seen so far there are still several notable choices.

The Japanese and English boxes for Etrian Odyssey IV

First, like Persona 4: The Golden, the Japanese and U.S. game boxes are largely similar. They use the same art, though the exact positioning of the logo text is slightly different. Perhaps the most interesting thing is the logo’s Japanese typeface. Sometimes, non-Japanese people, used to seeing seeing basic Japanese typefaces (or hand/brush written Japanese), are surprised to see stylized Japanese like the example here. To my eye, the kanji in Sekaiju no Maikyu’s logo looks like blackletter. Like Tactics Ogre, Sekaiju uses this style to represent its fantasy setting. The Japanese logo also visually references the game’s titular world tree through the curving branch that wraps around the logo. This little flourish sits behind the logo, except at the end where it grows out of an opening in that character.

The English logo doesn’t really recall that blackletter tradition. Instead, it looks more like a stylized serif font, though it still suggests a fantasy setting. In particular the poofy serif lines in Etrian Odyssey suggest magic to me. The first thing it reminded me of was the logo for the movie Aladdin. Additionally, the final “y” in odyssey also echoes the tree motif of the Japanese logo; the top section looks like stylized leaves, while the descender (the tail-like downstroke), loops back underneath the rest of the logo. It also ends in a plant-like bud. Finally, unlike the Japanese logo, the English logo sets the left side of the main text on top of a heraldic banner or flag. Perhaps a little too on the nose, but you can’t get more fantasy than that.

I actually think the differences between the logo point to subtle differences in how the games were marketed. The English version veers more to pop or cartoon fantasy, perhaps because the game’s fantasy setting and cartoonish art would otherwise seem incongruent to a U.S. audience otherwise.

Both versions also have the game’s subtitle, Denshou no Kyojin (The Legendary Giant God) and Legends of the Titans underneath the main logo. The Japanese subtitle uses a cool sans serif with a stylized downstroke on the last character, 神. I love this text. The English logo also uses a sans serif for the subtitle, opting for complex drop caps, on an almost metallic background. To me this also suggests fantasy (recall that metallic Tactics Ogre logo), though less artfully. Note also how the size and position of the subtitles on both versions creates hierarchy in relation to the main logo.

The overall impression for me, then, is that both logos are good, though the Japanese version clearly had more time, thought, and and attention devoted to it. In the Japanese logo, the characters are complex, but balanced and well-formed. The gradient is also more elaborate, the colors more subtle and absolutely lovely. The “tree” flourish looks wonderful.

This quality gap between versions shouldn’t be a surprise — the Japanese version was made as an original, by the game’s developers, to represent their work. The U.S. version, while not terrible, was made by localizers, with limited time and a limited budget, to stand-in for someone else’s work. Though I haven’t explicitly called it out, this is a theme we’ve seen through this article. Compare the Japanese and U.S. box art for Tactics Ogre, as an additional example (of many).

We can compare the logos for Sekaiju no Meikyu, here for SNM IV and V…
…and the logos for Etrian Odyssey IV and series logo

Most of the game takes place in a first person view, in which the player literally faces off against monsters in the game’s dungeons. In the battle screen, below on the left, note the character names at the bottom of the screen, in angular katakana and the prompt at the top of the screen, in rounder hiragana. Both are in a Japanese sans serif. These typefaces carry over into the menu screen on the right.

A battle screen and the in-game menu

The roundness of the Japanese typeface seems to fit the UI of the game well, including the English sans serif English text used for button commands and the main menu. There’s room for debate on whether having the command menu in all-caps was the best move. Perhaps not, as it makes it harder to differentiate the individual characters, therefore making it less legible. However, also the context is different when we’re primarily in Japanese.

A screenshot of dialogue from the Japanese Sekaiju no Meikyu IV

We’ll dive deeper into dialogue boxes when we check out the English localization of Sekaiju no Meikyu, but the black text contrasts well with the light green text. The modal doesn’t have a comic book tail, but does feature large, colorful character art that draws the eye in. Unlike the games we’ve seen so far, this character art is usually the only representation of a character on screen. There’s a button icon (A), to prompt players to press through the dialogue. Finally, the boxes even have a little flourish, with the green and subtly plant-like shapes around the main text.

In its use of a round Japanese face, along with an English san serif for headings and menus, Sekaiju no Meikyu’s similar to Persona 4, but to a much different end. Instead of being trendy, this type choice echoes the soft, cute art style (particularly the character designs by Yuji Himukai) that is characteristic of the entire series. Let’s check out some art.

Two character classes in Etrian Odyssey IV
Another three characters from the game — note the round, cute designs, which are also reflected in the Japanese typeface choices

Above are designs for some of the classes players can recruit. Like the sans serif font, these character designs are rounded, adorable, and inviting. As we mentioned before, the best typeface choices are ones we don’t notice, but the subtext of that “rule” is that the fonts are doing work that we may not consciously register. In this case, the font reflects one of the game’s most popular features, particularly in Japan; the compelling, round, and cute character art.

One other note about the Japanese text before we move to the English version of Etrian Odyssey IV. You’ll notice that some of the text in the screenshots above is light green over translucent dark green. One thing designers should note is accessibility, and while it’s too large a topic to investigate fully here, we do want to make note of potential issues with contrast. For people with impaired vision, it’s important that text contrast with its background enough that they can easily read the text. In short, here again, we’re concerned with legibility. Even for players with normal vision low contrast ratios make text less legible. For normal text, designers aim for a 4.5 to 1 contrast ratio.

The 4.5:1 ratio is used in this provision to account for the loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging.

It’s pretty easy to check this ratio. I went ahead and did so for the green text in the game, which scores a ratio of 3.1 to 1. This score would pass for large text (non-bold font at 18 pt, bold at 14 pt), but fails at normal-sized text. This means the text doesn’t provide enough contrast at normal sizes for vision impaired players.

This green on green text doesn’t provide enough contrast

This contrast level is not great because players with impaired vision would have a difficult time reading this text at normal sizes. The only saving grace is that the screen’s most important text, the main menu in the battle screen has a much better contrast ratio at 13.5 to 1 (selected text is even higher, at 17.6 to 1). Similarly, the game’s dialogue text has a high contrast at 11.4. This is beyond the requirements of AA or AAA levels of compliance in accessibility compliance and so will provide enough contrast at any text size.

Selected text has an even higher contrast at 17.6

Moving on, let’s take a look at Etrian Odyssey IV, the Western localization of Sekaiju no Meikyu.

Battle screens from the English version, Etrian Odyssey IV

Above are battle screens much like the one we saw in Japanese (the one on the left is even the same enemy — how cool is that?). The English elements from the Japanese original, like the main menu, the button references, and the turn indicator, are untouched. What’s changed is the Japanese text — the prompt (“What will you do?”) at the top of the screen and the character names at the bottom, which is in a serif English typeface.

Comparing the Japanese and English dialogue screens in Etrian Odyssey

My immediate response to the English serif font was strongly negative. Because the Japanese sans serif typeface fit into the rest of the UI and graphics so well, the English serif typeface stuck out. It almost looked like the text was badly photoshopped into the screens (which was my reaction to the English typeface used in the U.S. version of Persona 5 as well).

After my initial reaction, though, I’ve warmed up to the English text. It’s not perfect, by any means. By slotting in a serif typeface to replace the Japanese text, the relationship the text had with the UI and the character art vanishes. Even the harmony between the all caps English UI text from the Japanese version and the Japanese sans serif text vanishes with the text change. However, the English text is relatively legible. As we noted above, since the level of complexity is different between standard Japanese text and English (something we can see clearly in the two screenshots above), sans serif makes more sense in Japanese than in English. I still like the Japanese typeface better, but I’m less negative about the English serif than when I started.

As we saw with the game’s differing logos, I think the different typefaces also reflect a difference in how these games are being presented and marketed in different regions. The U.S. localization reflects this gap in its more cartoon-fantasy logo, and in that context the serif font isn’t completely out of left field.

One may ask why the localizers didn’t try to harmonize the serif font with the other English UI elements from the Japanese original. For English present in the Japanese original, Atlus likely didn’t see the point in re-doing assets that were already serviceable. Text in the English version that would have been better as a sans serif (the “What will you do?” text, character names on the battle screen) probably couldn’t be changed on a technical level. It would likely require the game to recognize an additional typeface, particularly in places there was no distinction in the Japanese original.

Shin Megami Tensei IV (3DS, 2013)

Japanese and U.S. box art for Shin Megami Tensei IV

Finally, we come to Nocturne’s sequel, the 3DS’s Shin Megami Tensei IV. The Japanese and U.S. box art are almost identical, the major addition being the English Shin Megami Tensei logo we saw above (SMTIV’s direct sequel, 2016’s Apocalypse, uses a much better logo). The English logo also features a light outline, making it pop off the background art.

Thankfully, SMT IV’s sequel, Apocalypse, uses a much better font for the SMT logo, though it gets rid of any Japanese text — the Japanese version uses the kanji logo we’ve seen before

Unlike Nocturne, dialogue text in SMTIV is presented in comic book style dialogue boxes (the word balloons’ shape are even rugged and sketchy). On top of the boxes are the speaker’s name. The Japanese version of the game features two other notable typographic features, furigana and red-emphasis text.

Dialogue in SMTIV is presented in a comic book style word balloon

Furigana are pronunciation guides in Japanese. We’ve already seen an example: the white Japanese text in Tactics Ogre logo. Japan really uses four writing systems. The two kana systems of syllabic letters, rounded hiragana and angular katakana, which are visually simplified and only represent sounds. Kanji on the other hand are ideographic characters, originally from China, which usually have multiple pronunciations in Japanese. The fourth writing system is the Latin alphabet which is widely in Japan, as we’ve seen. Since kanji can have multiple pronunciations, and students learn characters through elementary, middle, and high school, hiragana is often placed above kanji to aid Japanese-speakers.

Media directed toward older children often has furigana for most or all kanji, while media for adults generally only has furigana for complex or rare words — check out the screenshots for Japanese Nocturne and Persona 4 above, which don’t feature furigana. SMTIV is geared toward older children at least (the Japanese Cero C rating is 15+ years old, the game was rated “M” for mature in the U.S.) but likely the game’s release on 3DS was a good reason to include it. One of my favorite sites, Legends of Localization, has a pretty thorough explanation of furigana, if you’re interested in reading more.

Furigana in Crayon-shin manga and the 3DS game Doubutsu no Mori (Animal Crossing)

I don’t recall the red emphasis text in the English release of the game, but this text, which is in bright red, has a black outline, and even a drop shadow, really makes sure key items, requests, and other information pops out of the dialogue. It’s particularly useful in this game, where you’re often running errands for others.

Dialogue text in the Japanese and English versions of SMTIV

Like Etrian Odyssey, when Shin Megami Tensei IV shows a character “speaking” via the modal dialogue boxes, it only uses their character art, overlaid over a location background or battle screen. Otherwise, the boxes are pretty similar to what we’ve seen before — compelling art draws the reader in, word-balloon tails create a sense of dynamism and movement, and the modal dialogue boxes set text off from the on-screen action, enhancing its legibility and readability. We even have the button prompt to advance dialogue.

Both versions of the game use a sans serif font. I’m almost certainly biased in that I like the Japanese typeface more, including that red emphasis text. There are several elements I don’t like the English typeface. The relatively short descender on the lowercase g, for example, is irritating, because it’s harder differentiate it from other characters. Other lowercase characters also look similar, and are thus hard to differentiate. It’s not the worst English typeface ever, but I like the English Etrian Odyssey text much better.

There are few differences between the Japanese and English versions. The Japanese version is limited to two lines of dialogue per box, likely because it’s losing smaller lines to furigana. The U.S. version bumps up to three lines, but I like the room to breathe in the Japanese version.

Screens from SMTIV Final, which uses translucent dark background for most dialogue, but uses word balloons when allies help the player in battle

Interestingly, even though Apocalypse (subtitled Final in Japan) is a direct sequel to Shin Megami Tensei IV, it does away with the word-balloons for dialogue text. Instead, the serif Japanese dialogue text is on a dark translucent background. It looks much more like Nocturne. Apocalypse does however call-back to SMTIV’s original design, including a sans serif typeface, when allied characters help the player.

SMTIV has two screens, and spells are displayed on the bottom screen, freeing the battle screen from some typographic pressure

The English version of Shin Megami Tensei IV uses a similar sans serif throughout the battle UI as well. I particularly like the spell name (in the screenshot below, “Mazan”) set off on the top screen with an icon and a gold/yellow backing box.

We can compare and contrast the battle screen with Nocturne. For example, SMTIV has the “Player” text we saw in Nocturne, indicating the player or enemy turn, and the demon icons indicating turn of possible moves on the turn. On the 3DS the series has the luxury of presenting each character’s moves on the bottom screen. There are less typographic elements on the main battle, screen then, and the pressure on SMTIV’s typographic hierarchy, at least on this screen, is a little lower. On the other hand, the 3DS’s low-fi screen allows for less fidelity and nuance, so we don’t have the artful serif fonts we saw in Nocturne.

Video game typography is in an unenviable position. When it’s working, we tend to not notice it. Only when it sticks out do we pay attention. In trying to analyze the text in these games, a few themes became clear.

Typeface choices reinforce a game’s design, UI, and narrative themes. Our friend Matthew Butterick makes this easy to understand. “Good ty­pog­ra­phy re­in­forces the mean­ing of the text.” In the case of video games, typography not only supports the meaning of the text, but other themes within the game, including its visual design, UI, or even narrative themes.

Whether it’s the sans serif fitting into Persona 4’s UI, the serif in Tactics Ogre subtly suggesting parchment paper, or the the round typefaces in Etrian Odyssey paired with the game’s bubbly character designs, typeface choices support other themes in the game. As noted below, UI is an ecosystem, and typeface considerations should be made in conjunction with other design decisions.

UI is an ecosystem. I’ve mentioned several times how minor changes in localization seem to ruin carefully made decisions in the original version. In his book Experience Required (a must-read for designers) Robert Hoekman says this better than I could.

A design is an ecosystem. Disrupt one thing and you disrupt others. A designer’s work is to foresee what will be disrupted and how. And to have a plan for dealing with that change if needed.

One change can have a myriad of knockdown effects. Clearly changes have to be made — the entire process of localization is translating text, graphics, and even UI for audiences in different cultures. The best game designers will understand the technical limitations they’re working under and the implications of the changes they make.

The original is usually the best version. All that said, though, often the best version is the original. The original developers have an image of the product they want to create, from the logo to UX interactions in-game. At best, any changes made to these elements is made through a different lens. More regularly, not only is there a change in perspective, but also limitations on time and budget. Atlus USA wouldn’t localize Japanese games if it cost them as much to localize the game as it does to create it in the first place.

Important to note, this isn’t a “Japan is better” argument. When living in Japan, I often saw this in reverse, with non-Japanese media being localized for Japan. At its best, Japanese localizers work with as light a touch as possible. With Japan’s widespread English education, sometimes localizers had a little more leeway (for example, keeping an English language logo largely intact). Often, however, the same kind of issues cropped up in non-Japanese media localized for a Japanese audience.

Instead, the takeaway here is that the original creators of media have the most insight into what they want their creation to look like, and the most incentive to execute on that vision.

Good typeface choice isn’t invisible, but it does get out of the way. UI is an ecosystem, and type helps reinforce other visual choices. However, a designer’s choices shouldn’t monopolize a player’s attention. People want to play the game, not marvel at how a designer chose Helvetica over Gil Sans. Typography isn’t — and shouldn’t be — invisible, but if it’s calling too much attention to itself, it’s not supporting other themes.

Typographic hierarchy is vital in games, particularly in RPGs. Much of the gameplay in a typical RPG is spent in menus — battle screens, main menus, outfitting characters, checking stats. It’s vital that RPGs use typographic hierarchy to create order. Is it important that the player have access to battle commands, and is able to see the number of turns left? Then like Nocturne, those elements should be labeled and look different from less important commands. Good hierarchy can be the difference between Persona 5’s menus and Skyrim’s.

--

Learning to make things! Plus law, justice, minority experiences, and Japan. @ridwan and @coinbattles. 日本語OK!