The design of the popular RPG "Fate/Grand Order" that chooses "Skip" for readability, design, and visibility

Interview

The cumulative number of Downloads Japan exceeded 17 million (as of the end of June 2019), became the number one spot in global sales in the first half of 2018, and was awarded the “Award for Excellence in the Annual Product Category” at the “Japan Game Awards 2018”. , RPG for smartphones "Fate / Grand Order" (iOS / Android. Below, FGO). FGO PROJECT (TYPE-MOON, Aniplex, Delight Works production committee) is the development of this work that continues to be popular since its release and continues to attract fans.

This time, we interviewed Mr. Tsujibata, who is currently in charge of development, Delightworks, as the graphic director, about the selection and adoption of fonts in "FGO," and the role of fonts in the UI.

人気タイトル「FGO」のUIを支えるフォント

"Skip" adopted in the system font of "Fate/Grand Order"

Flow of font decision

Deciding the font is influenced by the flow of various elements. When the image on the screen is solidified, the image "Ah, let's use this font" appears. From there, we select the ones that are close to the overall image.

At the time of the development of "FGO", we proposed a Skip for TYPE-MOON, along with some drafts of the game screen to determine the system font first. Then, TYPE-MOON-like cooperation of the original, we continue to design the entire UI, Matisse, Tsukushi Mincho, New Rodin went also adopted font such as.

"Skip" that allows you to comfortably read enormous lines
A Mincho" Matisse" used to follow the image from the previous work "Fate / stay night"

Font "Skip" to comfortably read epic scenarios

There are three reasons for choosing Skip.

The first is readability.

壮大なシナリオ(ストーリー)が特徴の「FGO」では、テキストを気持ちよく読ませるということが、UI設計においてとても重要なことになります。UI画面でセリフが出る場面のUIを作っていた時に、読みやすく、さらにゲームの世界観ともしっくりきたものとして、「スキップ」をシステムフォントに選定しました。

The second is "neutral design with both hardness and softness".

Originally, the Fate series novel games often used the Mincho type, but I felt that the Mincho type had an atmosphere that was too serious about the world view.

Since this work "FGO" has not only serious but also comical scenes, I thought it was not good to fix the impression, so when designing the UI, I chose "Skip" for the font. .. In the early days, I also considered "Kiaro", but I felt that "Skip" would be easier to read because "Kiaro" has some habits.

"Comfortable reading" was an important factor, so it was "Skip" that matched them. Weight uses "B".

The third is "high visibility".

The first reference device that started the development of FGO was the "iPhone 5". The screen size was 1024x576, which was considerably smaller than that of current smartphones, so even with such a small size, the "high visibility" that was easy to read was one of the deciding factors.

"Skip" had a beautiful shape, whether it was large or small. The reason for choosing the weight "B" is that it was the easiest to read after trying all the weights on a smartphone.

Tutorial screen "Skip" is adopted so that you can read the text quickly.

A typeface selected as a candidate at the timing of font selection in the early stages of development.

UI commitment, fonts used there

Other than the main typefaces of "Skip" and "Matisse", for example," Tsukushi Mincho "is also used for the names of chapters on the game screen. For treasure items, it's "Tsukushi Mincho". I'm arranging a little "Tsukushi Mincho".

The UI inside the button is" New Rodin "I am using.

"New Rodin" is 90% long. I'm working so hard that I don't hit it hard. Customization is added for each character, such as fine-tuning the number of characters in the range.

Also, at the Event, we use different fonts that match the atmosphere of the Event.

 

In "FGO", the servant is the main one, so in order to make the servant (character) stand out, we try to make the user interface not too assertive and unnoticeable.

Another thing I'm careful about in the UI is "transparency". We attach great importance to "transparency" and make sure that there is no pressure on the screen.

And especially on the battle screen, we are particular about "intelligibility".

It's designed so that you can press the "Attack" button, so you can intuitively enjoy the battle.

The button on the upper left uses "New Rodin". Adjusted to 90% long body.
"New Rodin" is adjusted to 90% and used in the lower left menu.
"Tsukushi Antique L Mincho" is used for the Event banner.

Fontification of characters that do not actually exist, such as Majin (human under God) and Soji Okita

In "FGO", "Majin ( Person under god There may be some characters that do not actually exist, such as `` Soji Okita '', and it may be thought that it is a character, but these are used separately by Fontworks. ..

I think this is one of the attractions of the work, so I'm happy if you can search and find it.

Those who spoke this time

Takanobu Tsujihata

2017 Joined Delight Works Co., Ltd.

"FGO" Graphics Director

Involved in the launch of "Delight Art Works" and "Delight Graphic Works" to aim for the most exciting graphics.

"From the perspective of what TYPE-MOON wants to make and what he wants, he put together a design and an image board of the future, and actually shared the image with the leader of the team in charge and asked him to make it. To do this, we are managing the team from a bird's-eye view. ”

Fontworks fonts can be used with the annual flat-rate service "LETS".

Articles in the same Categories

More

Related Fonts pages

Related article