2017年8月10日

デザイン

【フォント】世界初のパラメトリックGoogleフォントとは?

目次

  1. はじめに
  2. パラメトリックフォントとは
  3. スペクトラルで遊ぼう!
  4. まとめ

はじめに

本記事では世界初のパラメトリックGoogleフォント、スペクトラルについてご紹介します。そもそも、パラメトリックフォントとはなんなのか、また、スペクトラルとはどういったフォントなのか、ご説明します!

パラメトリックフォントとは

そもそも、パラメトリックフォント(アリゴリズミックタイポグラフィ)とはなんなのでしょうか?

従来のフォントはフォントデザイナーの方がグラフィックデザインツールなどを使用し、それぞれの文字の形を細かく決めていきますが、パラメトリックフォントの場合、数学者がフォントのそれぞれの属性(太さ、幅、高さ、コントラスト、角のマルサなど)にアルゴリズムを定義し、フォントを作成します。

つまり、フォントが1セットしかなくても、アルゴリズムでオリジナルのフォントの様々な属性(太さ、幅、高さ、コントラスト、角のマルサなど)を変更することにより、何通りものフォントが出来上がります。

パラメトリックフォント(アルゴリズミックフォント)についてさらに詳しく知りたい方は、「文字による文字のための文字のサイト、type.center」をご覧ください。

特に、日本のグラフィックデザイナー、永原康史氏の「パラメトリック・タイポグラフィ」がおすすめです。
「パラメトリック・タイポグラフィ」永原康史氏

スペクトラルで遊ぼう!

実際にスペクトラルを触ってみたほうがわかりやすいので、こちらからスペクトラルの仕組みをご覧ください。

具体的に変更できるものは以下です。

アパチャー

アパチャーとは文字の中に含まれる空間を指します。
マウスを左に持ってくると空間が増え、右に持ってくると空間が閉じます。


セリフの幅、高さ

アルファベットの先についているとんがっている部分のことを「セリフ」と言いますが、その「セリフ」の高さと幅を変更することができます。

文字の太さ

こちらは、そのままですが、文字を太くした時にカーブが滑らかではなくなってしまうのが少し気になります。

数字形式の変更

ローマ数字で表記するか、アラビア数字で表示するかも変更することができるようです。
これは、すごい!

文字の幅

あまり文字の幅を変えることはないですが、どっしりとした印象をもたせたければ、
少し幅を広めると良いかもしれません。

セリフの高さとセリフのカーブ

セリフの高さは先ほどと同じですが、こちらではセリフのカーブを滑らかにするか、シャープにするか選ぶことができます。

文字のカーブ

英字の「o」、「e」、「c」などカーブがある文字のカーブの滑らかさを変更することができます。

文字のコントラスト

「コントラスト」とは横画と縦画の太さの比率のことです。
コントラストが少ないほど、どっしりとした印象に、逆に多いほど繊細な印象の文字ができます。

おまけ:文字の太さ

文字の太さは先ほどお見せしましたが、こちらは文字ではなく、文章の文字の太さが変更します。
文章で見ると、また違った印象になり、面白いです。

まとめ

以上です。パラメトリックフォントが普及するとフォントデザイナーの仕事が減るかもしれない、と懸念されています。しかし、今回のサンプルを見ると、普段フォントデザイナーさんがされている緻密なデザインとパラメトリックフォントが私たちにもたらす柔軟性は考え方としてはかなり違うものなのではないかと感じました。

ぜひ、皆さんもフォントで遊ぶ、という気持ちでパラメトリックフォントを触ってみてください。

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP