ITエンジニア/デザイナ向けにオープンソースを毎日紹介

デザイン - フォントの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2017/10/01

Hack - ソースコードのためのフォント

プログラミング用のフォントは何を使っているでしょうか。すでに世の中にはたくさんのフォントがあるので、好みによって千差万別でしょう。しかし見やすいフォントであれば文字の識別も容易になってバグも減りますし、何より書いていて快適です。今回はそんなプログラミングフォントの一つ、Hackを紹介します。## Hackの使い方こちら...

List

  • 2017/08/29

CSS SANS - 時代を表現するCSS製フォント

CSS3によって多くのデザインがCSSだけで実現できるようになっています。しかしまだまだできないことも存在します。その一つがフォントです。複雑でバランスが大事なフォントはWeb Fontを使って表現するのが基本です。そんな中作られたのがCSS SANSです。CSSだけで作られた、「時代によって変わる」がコンセプトのフォ...

List

  • 2017/06/13

EmojiOne Color SVGinOT Font - カラフルな絵文字フォント!

SVG in Open Typeという技術が現在開発されています。これはAdobeとMozillaが推し進めているもので、Open Typeの中にSVGを埋め込んでしまうと言う規格です。これによってOpen Typeのフォントがフルカラーで表現されたり、アニメーションできるようになります。EmojiOneという絵文字フ...

List

  • 2017/04/12

MockFlowFont - デザインに使えるモックフォント

Webサイトやスマートフォンアプリのモックデザインを作る際にはアテの文字を用意するのが一般的です。あああ、といったような適当な文字です。しかしあまり良い感じに仕上がらないこともあります。そこで使ってみたいのがMockFlowFontです。文字ではなく、単なる棒線のフォントです。## MockFlowFontの使い方実際...

List

  • 2017/03/15

opentype.js - 既存のフォントをちょっと変更。JavaScript製のOpenType/TrueTypeフォントパーサー

フォントをイチから作るのは大変です。日本語フォントはもちろんのこと、英語フォントにおいても多数の文字をデザインしなければなりませんし、それが統一されたデザインになっている必要があります。そこで使ってみたいのがはopentype.jsです。opentype.jsは既存のOpenType/TrueTypeフォントのパーサー...

List

  • 2017/02/09

FiraCode - プログラミングの可読性が上がる(?)なリガチャフォント

プログラミングをしているとよく使う記号が出てきます。例えばES2015を使っていると度々出るのが `=>` でしょう。PHPであれば `->` でしょう。これらはもはやセットで語られるべき存在なのかも知れません。そんなプログラミング言語にマッチしたフォントがFiraCodeです。合字を使って面白い表現ができます。## ...

List

  • 2017/01/13

emoji-extractor - Appleの絵文字フォントを画像化

元々ガラケー辺りからはじまり、iPhoneで一気に花開いた絵文字はemojiとして世界中で使われるようになっています。スマートフォンでは当たり前のように使われますが、そんなスマートフォンで入力された内容をWebページで表示したり、自分のアプリで正しく表示しようと思うとコトです。そこで使ってみたいのがemoji-extr...

List

  • 2016/07/26

mononoki - プログラミング/コードレビュー用フォント

プログラミングをする際にはフォントにも気を配らなければなりません。Oと0がきちんと見分けがつくものでないと、タイポをした際になかなか気付きません。同様にIとlであったり、1とlも見分けが必要です。今回はプログラミング用フォントのmononokiを紹介します。プログラミングおよびコードレビュー用のフォントだそうです。##...

List

  • 2015/06/17

Monoid - 低解像度でも十分使えるプログラミング用フォント

プログラマーは常にディスプレイの文字を見続けています。そのためフォントの可読性はとても大事なことです。可読性の低いフォントや二つの文字が見分けがつきづらいフォントを使っていたらtypoして思わぬバグを生む可能性があります。今回はコーディングのために作られたフォント、Monoid

List

  • 2015/02/19

Myrica - Rictyをベースに視認性を向上したプログラミングフォント

プログラマーであればこだわりたいのがフォントです。特に英語は見やすくても日本語がつぶれてしまったり、誤認しやすいフォントを使っていると余計なバグが入り込む可能性が高まります。個人的にはRictyを使っているのですが、さらにそのRictyを継承してプログラマー向けに進化したフォントがMyricaです。## Myricaの...

List

  • 2015/01/30

keyboard-font – キーボードを表現した記号フォント

キーボードショートカットの説明をしたい時にはどう書くのが良いでしょう。よくあるのはWin + Shiftキーといった具合にテキストでの説明です。より分かりやすくするためにテキストを四角で囲んでキーを表現したりすることもあります。一つ、二つであればそれでもいいですが大量のキーボードショートカットを表現したいとなったらke...

List

  • 2014/08/02

Noto Fonts - 全ての言語をサポートする美しいフォント

オープンソースの日本語フォントは選択肢がとても少ないです。Webシステムと組み合わせたり、Web Fontとして安心して使える日本語フォントがあれば、Web上での表現も向上するでしょう。そこでGoogleとAdobeが協力して開発されたフォントがNoto Fontsです。英語だけでなく、アラビア語や日本語、韓国語、中国...

List

  • 2014/06/02

Sophora – 実際に手で書いて作られた手書きフォント

デザインをラフに仕上げたり、アイディアをメモする際はしっかりとしたコンピュータの文字よりも手書きで走り書きしておくくらいの方が修正する余地があって良いと思っています。最近ではタブレットのようにスタイラスと組み合わせて手書きでメモできる環境もあります。しかしPCでマウスで手書き風に文字を書こうと思ってもなかなかうまくいき...

List

  • 2014/03/06

Glyphr - ここまで出来るとは!Webベースのフォントエディタ

フォントエディタとしては十分な機能ですね!Web Fontの影響もあって、フォント自体の魅力が見直されています。特徴的なフォントはもちろん、プログラミングしやすいフォントや可読性高いフォントなど普段使いできるものを知っていると重宝するでしょう。そんなフォントをWebベースで作成、編集できるのがGlyphrです。HTML...

List

  • 2013/10/30

Ionicons – 必見!iOS 7風、ソーシャル系アイコンも取り揃えたWeb Font

またしても使い勝手の良さそうなアイコンフォントが出てきましたよ!Bootstrapはアイコンの表示に際して画像を使っています。しかしそれでは大きさの変化や色の変更に柔軟に対応できません。そこでFont AwesomeではWeb Fontを使ってアイコンを提供する形をとっています。今回紹介するIoniconsもまた同様に...

List

  • 2013/09/25

等幅なコーディング向けフォント「Anonymous Pro」

Anonymous ProはOpen Font Licenseのオープンソース・ソフトウェアです。プログラミングやWebデザインを行う際にフォントは厳選して選んだ方が良いです。より可読性、品質の高いフォントを選ぶのが良いでしょう。今回はその一つ、Anonymous Proを紹介します。Anonymous Proのレギュ...

List

  • 2013/07/28

Web Fontを使ってフォントデザインの差分表示「Tiff」

Tiffはnode/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。フォントの世界はとても深く、ぱっと見では分からない詳細なところにまで心が行き届いていたりします。そこで使ってみたいのがTiffです。二つのフォントの差異をビジュアル的に確認できるソフトウェアで...

List

  • 2013/04/24

おすすめ!Photoshopのフォントをもっと選択しやすくする「ConceptualCase」

ConceptualCaseはPhotoshopのフォント表示を階層化し、Font Bookで管理できるようにするソフトウェアです。Mac OSX版のPhotoshopで作業している時に、フォントを選ぶのがとても面倒に感じていました。あれだけ長く並んでいると、多数のフォントをインストールしている場合に大変です。そこで使...

List

  • 2013/02/15

想像力を限界まで引き上げろ!フォントを使ったプロトタイプ作成「BLOKK」

BLOKKは全て塗りつぶしたフォントで、ワイヤーフレームを表現するのに利用できます。BLOKKはフォントですが、単純に真っ黒に塗りつぶしただけのフォントです。さらに言えばどれを入力しても真っ黒な四角が出るだけです。さて、何に使えるのでしょうか。真っ黒です。スペースキーだけは空白文字が出ます。お、何かに見えてきましたか?...

List

  • 2012/12/30

フォントを作るのに最適なフォント専用エディタ「Birdfont」

BirdfontはWindowsやLinuxで動作するフォントエディターです。フォントを作るというのは大変な労力を要すると思われますが、その手助けになりそうなソフトウェアがBirdfontです。メイン画面です。プレビューです。フォントを書く画面です。作成したフォントがここに入っていきます。英語圏のフォント向けになるよう...