The Variable Font

RC Swow Serif

The Variable Font for roman serifs. The font is for Graduation project.
Thank you for visiting this page. by Masaki Ando

  • はじめに

    本サイトは、私 安藤真生がサレジオ高専5年で取り組んでいる卒業研究、「調整可能なローマン体とその印象」で製作した書体 “RC Swow Serif” の紹介ページです。「欧文のローマン体の印象に、どれくらいセリフが関与しているのか？」を調査目的に、2016年9月にワルシャワで行われたATypIカンファレンスにて発表された技術 “Variable Font” を用いて書体制作を行いました。

  • RC Swow Serifとは

    RC Swow Serifは、私の卒業研究で製作したVariable Font—バリアブルフォントです。バリアブルフォントとは、複数のマスターを持ち、その間を自由にユーザーが調整することができる書体です。

    variable fontの説明画像
    Variable Fontの動作デモ(Monotype Blogより引用)
    variable fontの説明画像
    Multiple Masterの動作デモ(Monotype Blogより引用)

    Monotypeの記事から引用したGif動画を見ると、中心のマスターと細い–太い、狭い–広いのマスターの間を自由に生成しているのがわかるでしょう。(詳しくは元の記事を参照してください。英語ですが、図だけでもなんとなく伝わると思います。)通常のバリアブルフォントが横幅やウェイトを軸として調整できるのに対して、私はローマン体におけるセリフを調整できるバリアブルフォントを製作しました。セリフの厚み(Thickness)、セリフの高さ(Height)、曲線度(Straighter)という3つの軸で調整を行います。これにより2つのことが可能になります。

  • 1.分類の横断

    1つ目に、セリフを調整することでローマン体の様々な分類を横断することができます。基本となる骨格や文字幅は共有していますが、実際の分類法におけるOld Style, Didone, Slabなどと言った書体をセリフによって擬似的に再現することができます。それらの特徴的なスタイルを6つに分けたものを、下方に記載しています。

    • RC Swowの概念図
      RC Swow SerifのVariable Font概念図 / 各属性の調整による変化
      各属性の調整による変化
    • Height / Straigher
    • Height / Thickness
    • Straighter / Thickness
    分類の種類
    特徴的なスタイルと、その設定値
  • 2.見出し・本文それぞれに合わせたオプティカル・スケーリング

    2つ目として、1つのスタイルの中でも、ITC Bodoniのように見出し用・本文用・キャプション用などの用途に合わせて、読みやすくするために調整ができます。Didoneは細い線が特徴的なスタイルですが、本文にするとその細さから可読性が失われます。しかし、Thicknessを調整することで、本文でも読みやすいDidoneスタイルを維持することができます。

    オプティカルスケーリング
    Didoneスタイルにおけるオプティカル・スケーリング

    下のデモでは、実際の調整の様子がご覧いただけます。

  • アンケートについて（締め切り済み）

    このページは、今回の卒業研究における仮説「セリフを調整することで、ローマン体の印象は変化する」を検証するために製作しました。アンケートを回答してくださる方は、以下のように文章を眺めていただけると幸いです。

    1. それぞれの書体の見出し、本文を見て、どのような印象を持つか感じてください。
    2. 全ての書体を見終わったら、それぞれの書体を見比べて見て、この書体はこの書体に比べてこう感じる、この書体とこの書体は似ている、などを考えて見てください。
    3. 最後に、この中で自分がいちばん好きな書体と、あまり好きではない書体を決めてください。
    4. アンケートに回答してください。

    アンケートは終了しました。たくさんの回答とアドバイス、応援など本当にありがとうございました！アンケート結果は、ページ下部に公開しています。

1. Old Style

Aa

Old Style
Neo Classical

First: Old Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut diam cursus nibh suscipit pharetra ut id massa. Mauris mattis arcu non lobortis blandit. Praesent efficitur non metus eget rhoncus.Maecenas volutpat pretium nunc, eget sollicitudin leo ullamcorper eu. Aenean sit amet dolor vel nibh vehicula aliquet eget in massa. Fusce efficitur tempor laoreet. Proin mi nisl, luctus ut tincidunt id, luctus a sem. Pellentesque malesuada quam id tempus sagittis. In mollis convallis diam eu ornare. Curabitur dapibus in nunc nec pharetra. Curabitur eget pulvinar nisi. Duis eu laoreet nulla. Morbi sapien mi, semper a dictum non, dictum non lorem. Integer vestibulum nisi orci. Phasellus a tincidunt magna, tincidunt egestas velit. Suspendisse a nisl eu eros malesuada commodo quis nec odio.

Old Styleは16世紀ごろのオールドスタイル・ローマンを参考にしており、Thickness=500, Height=1000, Straighter=1000を基本としています。本文は標準のオールドスタイルで組み、サイズが大きくなるにつれてThicknessを0に近づけ、ネオクラシカルに近づいて行きます。

2. Clarendon

Aa

Clarendon

Second: Clarendon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut diam cursus nibh suscipit pharetra ut id massa. Mauris mattis arcu non lobortis blandit. Praesent efficitur non metus eget rhoncus. Maecenas volutpat pretium nunc, eget sollicitudin leo ullamcorper eu. Aenean sit amet dolor vel nibh vehicula aliquet eget in massa. Fusce efficitur tempor laoreet. Proin mi nisl, luctus ut tincidunt id, luctus a sem. Pellentesque malesuada quam id tempus sagittis. In mollis convallis diam eu ornare. Curabitur dapibus in nunc nec pharetra. Curabitur eget pulvinar nisi. Duis eu laoreet nulla. Morbi sapien mi, semper a dictum non, dictum non lorem. Integer vestibulum nisi orci. Phasellus a tincidunt magna, tincidunt egestas velit. Suspendisse a nisl eu eros malesuada commodo quis nec odio.

Clarendonはセリフを最大まで厚くしたOld Styleと言えます。サンセリフに近い、親しみやすい印象を持っており、Thickness=1000, Height=1000, Straighter=1000を、本文と見出しどちらでも使用しています。書体の分類法においては小泉均著の「タイポグラフィ・ハンドブック」にNew Traditionalとして分類されていますが、一般にこのようなセリフを見かけることは珍しいでしょう。

3. Didone

Aa

Didone

Third: Didone

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut diam cursus nibh suscipit pharetra ut id massa. Mauris mattis arcu non lobortis blandit. Praesent efficitur non metus eget rhoncus. Maecenas volutpat pretium nunc, eget sollicitudin leo ullamcorper eu. Aenean sit amet dolor vel nibh vehicula aliquet eget in massa. Fusce efficitur tempor laoreet. Proin mi nisl, luctus ut tincidunt id, luctus a sem. Pellentesque malesuada quam id tempus sagittis. In mollis convallis diam eu ornare. Curabitur dapibus in nunc nec pharetra. Curabitur eget pulvinar nisi. Duis eu laoreet nulla. Morbi sapien mi, semper a dictum non, dictum non lorem. Integer vestibulum nisi orci. Phasellus a tincidunt magna, tincidunt egestas velit. Suspendisse a nisl eu eros malesuada commodo quis nec odio.

DidoneはOld Styleとは違い、セリフに高さを持ちません。極細のセリフをもち、サイズが小さくなるにつれて厚みが増しますが、高さは変わりません。Thickness=0, Height=0を基本とし、ITC Bodoniのオブティカルスケーリングから着想を得て、小さくなるにつれてThicknessが500に近づいていきます。

4. Slab

Aa

Slab

Fourth: Slab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut diam cursus nibh suscipit pharetra ut id massa. Mauris mattis arcu non lobortis blandit. Praesent efficitur non metus eget rhoncus. Maecenas volutpat pretium nunc, eget sollicitudin leo ullamcorper eu. Aenean sit amet dolor vel nibh vehicula aliquet eget in massa. Fusce efficitur tempor laoreet. Proin mi nisl, luctus ut tincidunt id, luctus a sem. Pellentesque malesuada quam id tempus sagittis. In mollis convallis diam eu ornare. Curabitur dapibus in nunc nec pharetra. Curabitur eget pulvinar nisi. Duis eu laoreet nulla. Morbi sapien mi, semper a dictum non, dictum non lorem. Integer vestibulum nisi orci. Phasellus a tincidunt magna, tincidunt egestas velit. Suspendisse a nisl eu eros malesuada commodo quis nec odio.

Slabは線の太さがほぼ均一で、セリフ体よりはサンセリフ体に近い印象を持ちます。明快で読みやすく、愛嬌があるので見出し、本文共に用いることができます。Thickness=1000, Height=0で設定しています。ジオメトリックな骨格が多いですが、今回は骨格を統一しているためヒューマニスト寄りの骨格です。

5. Swifty

Aa

Swifty

Fifth: Swifty

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut diam cursus nibh suscipit pharetra ut id massa. Mauris mattis arcu non lobortis blandit. Praesent efficitur non metus eget rhoncus. Maecenas volutpat pretium nunc, eget sollicitudin leo ullamcorper eu. Aenean sit amet dolor vel nibh vehicula aliquet eget in massa. Fusce efficitur tempor laoreet. Proin mi nisl, luctus ut tincidunt id, luctus a sem. Pellentesque malesuada quam id tempus sagittis. In mollis convallis diam eu ornare. Curabitur dapibus in nunc nec pharetra. Curabitur eget pulvinar nisi. Duis eu laoreet nulla. Morbi sapien mi, semper a dictum non, dictum non lorem. Integer vestibulum nisi orci. Phasellus a tincidunt magna, tincidunt egestas velit. Suspendisse a nisl eu eros malesuada commodo quis nec odio.

Trump MedievalやSwiftなどに見られる直線的なセリフはウェッジセリフといい、モダンで明るい雰囲気を持っています。Thickness=500, Height=1000, Straighter=0を基本としており、セリフが薄く、かつ直線的なセリフという組み合わせはなかなかないため面白いですが、同時に違和感もあります。

6. Wedge

Aa

Wedge

Sixth: Wedge

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut diam cursus nibh suscipit pharetra ut id massa. Mauris mattis arcu non lobortis blandit. Praesent efficitur non metus eget rhoncus. Maecenas volutpat pretium nunc, eget sollicitudin leo ullamcorper eu. Aenean sit amet dolor vel nibh vehicula aliquet eget in massa. Fusce efficitur tempor laoreet. Proin mi nisl, luctus ut tincidunt id, luctus a sem. Pellentesque malesuada quam id tempus sagittis. In mollis convallis diam eu ornare. Curabitur dapibus in nunc nec pharetra. Curabitur eget pulvinar nisi. Duis eu laoreet nulla. Morbi sapien mi, semper a dictum non, dictum non lorem. Integer vestibulum nisi orci. Phasellus a tincidunt magna, tincidunt egestas velit. Suspendisse a nisl eu eros malesuada commodo quis nec odio.

このスタイルは、Slabのような厚いセリフに直線的な傾斜を持つ、ほとんど見ることのないスタイルです。シンプルでスマートな印象を持つように見えます。このジャンルを分類する名前が見つからないため、とりあえずウェッジセリフのWedgeを引用しました。Thickness=1000, Height=1000, Straigher=0を設定しています。

各スタイルのフォントサンプル

Garamond

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut diam cursus nibh suscipit pharetra ut id massa. Mauris mattis arcu non lobortis blandit. Praesent efficitur non metus eget rhoncus.

Didot

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut diam cursus nibh suscipit pharetra ut id massa. Mauris mattis arcu non lobortis blandit. Praesent efficitur non metus eget rhoncus.

Swift

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut diam cursus nibh suscipit pharetra ut id massa. Mauris mattis arcu non lobortis blandit. Praesent efficitur non metus eget rhoncus.

Glypha

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut diam cursus nibh suscipit pharetra ut id massa. Mauris mattis arcu non lobortis blandit. Praesent efficitur non metus eget rhoncus.

Clarendon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut diam cursus nibh suscipit pharetra ut id massa. Mauris mattis arcu non lobortis blandit. Praesent efficitur non metus eget rhoncus.

アンケート記入フォーム

Thank you for your Answers

アンケートは終了しました
アンケート結果
普段デザインに携わっていますか？
書体を意識して使っていますか？
一番好きなスタイルは？
あまり好きではないスタイルは？
各スタイルの印象分析
各スタイルで印象の変化を感じましたか？
本文サイズで印象の変化を感じましたか？
フォントサンプルで印象の違いを感じましたか？
回答・閲覧してくださった方々、
ご意見・ご協力くださった方々、
本当にありがとうございました！

© 2018 Masaki Ando.