font

f:id:sadah:20161207123013p:plain

Goodpatch Advent Calendar 2016の7日目！

フォントもくもく会 #5でVariable Fontについて調べてみた。2016年9月にVariable Fontというものが発表された。ひとつのフォントファイルで、さまざまなウェイトで表示ができる。

ワルシャワで開催中のATypIカンファレンスにて、バリアブルフォントと呼ばれる新しいタイプのフォントが世界に紹介されました。Apple、Google、Microsoft、およびアドビが共同で開発したバリアブルフォントは、ジョンハドソン（John Hudson）の言葉を借りれば「ひとつのファイルでありながら複数のフォントのように動作する」フォントです。ひとつのフォントファイルを使い、ファイルサイズを拡大することなくウェイト（太さ）や幅やその他の属性を無限に変更することができたらどうなるか、またデザインにおいてそれがどのような意味を持つかを想像してみてください。

The Typekit Blog | バリアブルフォント – 柔軟なデザインを可能にする新しい種類のフォント

原文はこちら。

The Typekit Blog | Variable fonts, a new kind of font for flexible design

Typekit BlogにVariable Fontのページができている。

The Typekit Blog | Variable font technology from Adobe

Variable Fontの概要はこんな感じ。

「何百年もの間、わたしたちがつくってきた活字というものは、固定的で、動かないものでした」とアドビのTypekitとTypeのフォントデザインを監修したティム・ブラウンは言う。「いま、わたしたちがつくらなければならないのは、さまざまな状況に対応し、なおかつ美しい表示を保つ、書体デザイナーのマインドをもった製品です」

<中略>

ヴァリアブルフォントとは基本的に、フォント系をひとつのファイルに納めたものだ。いわゆる「デザインスペース」（これは専門用語だ、失礼）に1本もしくは複数の軸を置き、それを使ってフォントスタイルがどう変わるかを定義する。あるデザイナーがゴッサム体（オバマ大統領の選挙戦で使われた書体である）を使っていて、太さを変えたいと思ったとしよう。軸の一端に極細のゴッサム体、もう一端には極太のゴッサム体があり、その間にあるあらゆる太さが選択可能だ。ひとつのファイル内に、ほとんど無限の選択肢があることになる。

ウェブ最大の「フォント問題」を巡ってアップル、グーグル、MS、アドビが団結｜WIRED.jp

詳しいことはここに書いてあるけど、詳しすぎて理解できなかった。

Introducing OpenType Variable Fonts – Medium

MicrosoftやGoogleも記事をあげている。

Variable FontはOpenType 1.8の仕様で定義されている。

OpenType Font Variations Overview

ぜんぜんちゃんと読んでいないけど、画像だけでなんとなく雰囲気がわかる。気がする。

Variable Fontを確認する

Variable Fontを確認したい。サンプルのフォントファイルをAdobeが公開してくれている。

ビルドされたOTFがここにあるのでダウンロードする。

Release version 1.001 · adobe-fonts/adobe-variable-font-prototype

フォントを表示するViewerをGoogleが公開してくれている。

googlei18n/fontview: Demo app that displays fonts with a free/libre/open-source text rendering stack: FreeType, HarfBuzz and Raqm

readmeにある通りビルドする。時間が掛かる。

$ git clone --recursive https://github.com/googlei18n/fontview.git
$ cd fontview
$ python2.7 build.py && ./build/FontView.app/Contents/MacOS/fontview

自動で立ち上がらなかったら fontview/build/FontView.app をダブルクリックして立ち上げる。

頑張ってビルドしたけど、ここにビルド済みのものがあった…。ちゃんと動いた。

Releases · googlei18n/fontview

さっそくAdobe Variable Font Prototypeを表示してみる。感動する。

f:id:sadah:20161207093239g:plain

Contrastを変えても変化がないなーと思っていたら、かなり細かい部分の変化だったので気付かなかった。フォントサイズを大きくしたらわかった。

f:id:sadah:20161207093300g:plain

Safari Technology PreviewでVariable Fontを試す

Safari Technology PreviewでVariable Fontがちょっとだけ試せる。すばらしい。

さっそくSafariをインストールして、文中にあったサンプルを表示する。あたりまえだけど、Chromeとかではちゃんと表示されない。

こんな感じで表示できた。うれしい。

f:id:sadah:20161207131525g:plain

サンプルのコードをみると、どうやらSan FranciscoがVariable Fontになっているみたい。ファイルを探してみるとこれっぽい。

/System/Library/Fonts/SFNSDisplay.ttf

FontViewでもちゃんと表示できた。

f:id:sadah:20161207105304g:plain

Adobe Variable Font PrototypeをWebFontとしてSafariで表示させようとしてみたけどうまくいかなかった。ざんねん。

font-variation-settings

ブラウザでVariable Fontを利用すると、font-weight / font-stretch / font-style / font-sizeあたりのプロパティが影響を受ける。こんな感じのことができるようになる。

font-weight: 791; /* Intermediate value between 700 and 800. */

Variable Fonts on the Web | WebKit

またVariable Fontに関する低レベルのプロパティがCSS Fonts Module Level 4で定義されている。現在の最新版はEditor’s Draft, 6 December 2016だった。

プロパティの中身はこんな感じになっている。

f:id:sadah:20161207112851p:plain

こんな感じで指定するみたい。ただこのXHGTという文字列がなんのしていなのかわからない…。

大文字の軸名は、そのフォントの作者が独自に定義した名前（privately-defined axis tag）です。この例の XHGT はたぶん x-height の略でしょう。

[追記] id:mashabow さんがコメントで教えてくださった。ありがとうございます。

font-variation-settings: "XHGT" 0.7;

Variable Fonts on the Web | WebKit

<string>にはOpenTypeまたはTrueType Variationのバリエーションの軸名(Axis Name)を指定する。これはOpenType / TrueTypeの仕様で定義されているみたい。たぶんこのあたり。

もともとAppleが作成していたTrueType GXの仕様はこれみたい。

TrueType GX

The Font Variations Tableではこんな感じの定義がされている。

Tag	Name	Description	Scale	“Normal” value
'ital'	Italic	Used to vary between non-italic and italic.	Values must be in the range 0 to 1. A value of 0 can be interpreted as “Roman” (non-italic); a value of 1 can be interpreted as (fully) italic.
'opsz'	Optical size	Used to vary design to suit different text sizes.	Values can be interpreted as text size, in points. (Text size can be as determined in an application and is not necessarily physical size on a display surface.) Values must be strictly greater than zero.	12
'slnt'	Slant	Used to vary between upright and slanted text.	Values can be interpreted as the angle, in counter-clockwise degrees, of oblique slant from whatever the designer considers to be upright for that font design. Values must be greater than -90 and less than +90.
'wdth'	Width	Used to vary width of text from narrower to wider.	Values can be interpreted as a percentage of whatever the font designer considers “normal” for that font design. Values must be strictly greater than zero.	100
'wght'	Weight	Used to vary stroke thicknesses to give variation from lighter to blacker.	Values must be in the range 1 to 1000. Values can be interpreted in direct comparison to values for usWeightClass(in the 'OS/2' table), or the CSS font-weight property — see the note below.	400

AppleのTrueType Reference Manualだとこんな感じ。

Tag	Name	Default	Description
'wght'	Weight	1	Used for making a font range from light to black.
'wdth'	Width	1	Used for fonts ranging from narrow to wide.
'slnt'	Slant		Specifies the angle (in degrees) of italic slant.
'opsz'	Optical Size	12	Specifies the optical point size.

またfont-variation-settingsもtransformなどのCSSアニメーションをサポートしている。

Appleのページで紹介されていたコードを見直してみる。アニメーションするやつはこんな感じ。 @keyframes で font-variation-settings の値を変化させている。

div {
  font: 70px -apple-system;
  animation-name: 'doughnuts';
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes doughnuts {
    from {
        font-variation-settings: "wght" 1;
    }
    to {
        font-variation-settings: "wght" 1.98;
    }
}

いろんな種類が表示されていたやつはこんな感じ。 wght や wdth が使われている。

div {
  font: 60px 'Skia';
}

#light {
  font-variation-settings: 'wght' 0.8;
}

#heavy {
  font-variation-settings: 'wght' 1.2;
}

#condensed {
  font-variation-settings: 'wdth' 0.8;
}

#expanded {
  font-variation-settings: 'wdth' 1.2;
}

#lightexpanded {
  font-variation-settings: 'wght' 0.8, 'wdth' 1.2;
}

#heavycondensed {
  font-variation-settings: 'wght' 1.2, 'wdth' 0.8;
}

いろんなパターンを試してみたけど、うまく動作しないものも多かった。今後に期待する。

まとめ

Variable Fontを利用すると、フォントファイルのサイズを削減できるかもしれない。1つのウェイトのフォントファイルよりは大きくなるけど、複数のウェイトのフォントを利用するなら、ファイルを複数読み込む必要がなくなる。どの程度削減できるか調べてみたけど、情報があまりないみたいで見つけられなかった。

Type Projectさんではフィットフォントという製品があってデモが楽しい。このページでのウェイトの変化はSVGで実装されている。

Type Project オンラインショップ / フィットフォント

これまでフォントの多くは、利用するウェイトが増えると価格が高くなることが多かった。Variable Fontになると、1つのフォントファイルでさまざまなウェイトやコントラストがカバーできるようになる。そうするとフォントの価格ってどうなるんだろう、と思った。すでにTP明朝ではコントラストという概念もあるし。

Variable Fontの普及やフォントファイル側の対応にはまだ時間が掛かるだろうけど、これまでにできなかった表現ができるようなるのがとてもたのしみ。

f:id:sadah:20141208152641j:plain

これらの本では、すべて精興社書体が使われている。#LOVEFONT Advent Calendar 2014 - Adventarの8日目、精興社書体について書く。

精興社と精興社書体

秀英体も好きだけど以前あれこれ書いたし、この精興社書体も大好きなので、こうやって書く機会があって嬉しい。

精興社はこんな会社。

1913年4月、白井赫太郎により東京活版所として東京都神田区美土代町に設立された。白井は活版印刷の品質の向上を目的として、新しい書体の開発を君塚樹石に依頼、精興社タイプと呼ばれる、細身の美しい書体を作り上げた。また一度使用した活字は再利用せず、再度鋳造することにより、非常に美しい印刷物を作ることに成功した。

精興社 - Wikipedia

精興社のサイトには、精興社書体や活版印刷についての読み物があって楽しい。

この記事も面白い。