デザイン - フォントの記事一覧
JetBrains Mono - JetBrains製の開発者用フォント
開発者にとって視認性の高いフォントは重要です。ポケモンセンターでもらえるシリアルコード、視認性悪くて文字の判別ができない「目がよくても無理」「なぜこのフォントにした」 - Togetter
Victor Mono - エレガントなプログラミングフォント
プログラミングフォントは何を使っていますか。通常のフォントではOと0が見分けづらかったり、文字幅が違って全体のバランスが崩れたりします。やはり開発用に使いやすいフォントを用意すべきです。今回紹介するVictor Monoは一風変わったプログラミングフォントになります。## Victor Monoの使い方例です。 `=>...
Leon Sans - アニメーションもできるJavaScript製のフォント
フォントを変えると、文面の印象ががらっと変わることがあります。フォントによって受ける印象はそれぞれで、最適なものを選ばないといけません。同じフォントであっても太さが変わるとまた違うでしょう。今回紹介するLeon SansはSans Serif風のフォントですが、プログラマブルな特徴があります。## Leon Sansの...
Utatane - プログラミング用の日本語等幅フォント
日本語でプログラミングをしている時に困るのが英字と日本語のバランスです。記号や英字で幅が違ったりすると何となく気持ちが悪かったり、さらにそこに日本語まで加わるとずれが大きくなります。そこで使ってみたいのがUtatane、プログラミング用の日本語等幅フォントです。## Utataneの使い方Utataneの文章例。英語は...
Zpix - 英語、日本語、中国語をサポートしたピクセルフォント
フォントは特徴を持つことで利用する場面が思いつくようになります。そうすると、いざその場面に出会ったときに、あのフォントを使おうと思い立つでしょう。作るなら、そんなフォントを作ってみたいものです。今回紹介するZpixは、まさにそんなフォントと言えるでしょう。多彩な言語をサポートしたドット絵風（ピクセル）フォントです。##...
CSSans Pro - CSS製のフォント
最近はWebFontが流行っており、Web上で格好良いテキスト表現ができるようになっています。しかしWebFontの弱点としては、基本的に単色のみということです（合字で可能にする方法もあるようですが）。それでは表現力が片手落ちでしょう。そこで参考にしたいのがCSSans Proです。CSSで作られたフォントになります。...
Consolas - 開発者用のフォント
**2019年02月22日追記：こちら、ライセンスが非常に怪しい（というかブラック）です。記事は残しますが、ダウンロード/利用されないことをお勧めします。**プログラマーやWebデザイナーにとってフォントは気になる存在です。そのフォントの善し悪しで作業効率が大幅に変わってきます。視認性の悪いフォントを使うと不用意なバグ...
Fontviewer - ローカルフォントの書体をまとめてチェック
フォントの世界は奥深いです。フォントを変えるだけで、デザイン全体の印象が変わってきます。フォントが統一されることで全体の統一感が生まれ、雰囲気が整います。適当に気分で選んでいると、世界観もまたばらばらになってしまうでしょう。そこで使ってみたいのがFontviewerです。ローカルにインストールされているフォントの書体を...
Isaax Font - 適したフォントがなければ作る！
社内や自社サービスの中で利用するフォントは決まっているでしょうか。MOONGIFTの場合はM+ c1（日本語）とRichy（英語）を使うようにしています。フォントを統一することで雰囲気を統一し、結果としてブランディングに通じていくでしょう。もし自分たちにマッチしたフォントが見つからない場合はどうしたら良いでしょうか。そ...
ワープロ明朝 - ノスタルジックなワープロ時代を再現したフォント
パソコンが普及する前はワープロを使ってドキュメントなどを作成していました。最後の方ではインターネットに接続できるワープロさえありました。書くことに集中できるのでワープロが好きだったという方も多いことでしょう。そんなワープロの時代に使われていたフォントを再現したのがワープロ明朝です。## ワープロ明朝の使い方ワープロ明朝...
Webfonts Generator - SVGからWebFontsを生成
WebFontsはよく使われるようになっています。特にアイコンフォントで便利です。文字サイズさえ指定すれば、大きなサイズでも綺麗に表示されます。しかし作成するのが大変という印象もあります。そこで使ってみたいのがWebfonts Generatorです。なんとSVGからWebFontsを生成します。## Webfonts...
Fontmin - サブセットフォントを使ってアジア圏のWebFontを使いやすく
Web上での表現力を高める施策としてWebFontが使われる機会が増えています。多くはアイコンフォントであったり、欧米のフォントになるでしょう。日本語や中国語など、アジア圏のフォントは文字数も多く、サイズが大きくなりがちです。そこで使ってみたいのがFontminです。使われていない文字を削ることで軽量なサブセットフォン...
Cica - 日本語向け等幅プログラミングフォント
効率的なプログラミングのためには適切なフォントが必要です。見やすく、区別が付きづらい1とlといった文字の判別がしやすいフォントが良いでしょう。また、等幅のが好きな方が多いようです。そんな方に使ってみて欲しいのがCicaです。日本語向けに作られたプログラミングフォントです。## Cicaの使い方コードを表示しているところ...
Hack - ソースコードのためのフォント
プログラミング用のフォントは何を使っているでしょうか。すでに世の中にはたくさんのフォントがあるので、好みによって千差万別でしょう。しかし見やすいフォントであれば文字の識別も容易になってバグも減りますし、何より書いていて快適です。今回はそんなプログラミングフォントの一つ、Hackを紹介します。## Hackの使い方こちら...
CSS SANS - 時代を表現するCSS製フォント
CSS3によって多くのデザインがCSSだけで実現できるようになっています。しかしまだまだできないことも存在します。その一つがフォントです。複雑でバランスが大事なフォントはWeb Fontを使って表現するのが基本です。そんな中作られたのがCSS SANSです。CSSだけで作られた、「時代によって変わる」がコンセプトのフォ...
EmojiOne Color SVGinOT Font - カラフルな絵文字フォント！
SVG in Open Typeという技術が現在開発されています。これはAdobeとMozillaが推し進めているもので、Open Typeの中にSVGを埋め込んでしまうと言う規格です。これによってOpen Typeのフォントがフルカラーで表現されたり、アニメーションできるようになります。EmojiOneという絵文字フ...
MockFlowFont - デザインに使えるモックフォント
Webサイトやスマートフォンアプリのモックデザインを作る際にはアテの文字を用意するのが一般的です。あああ、といったような適当な文字です。しかしあまり良い感じに仕上がらないこともあります。そこで使ってみたいのがMockFlowFontです。文字ではなく、単なる棒線のフォントです。## MockFlowFontの使い方実際...
opentype.js - 既存のフォントをちょっと変更。JavaScript製のOpenType/TrueTypeフォントパーサー
フォントをイチから作るのは大変です。日本語フォントはもちろんのこと、英語フォントにおいても多数の文字をデザインしなければなりませんし、それが統一されたデザインになっている必要があります。そこで使ってみたいのがはopentype.jsです。opentype.jsは既存のOpenType/TrueTypeフォントのパーサー...
FiraCode - プログラミングの可読性が上がる（？）なリガチャフォント
プログラミングをしているとよく使う記号が出てきます。例えばES2015を使っていると度々出るのが `=>` でしょう。PHPであれば `->` でしょう。これらはもはやセットで語られるべき存在なのかも知れません。そんなプログラミング言語にマッチしたフォントがFiraCodeです。合字を使って面白い表現ができます。## ...
emoji-extractor - Appleの絵文字フォントを画像化
元々ガラケー辺りからはじまり、iPhoneで一気に花開いた絵文字はemojiとして世界中で使われるようになっています。スマートフォンでは当たり前のように使われますが、そんなスマートフォンで入力された内容をWebページで表示したり、自分のアプリで正しく表示しようと思うとコトです。そこで使ってみたいのがemoji-extr...