【厳選】UIに使える欧文書体まとめ｜てっちゃん
デザイナーを目指している人や現役のデザイナーにとって、デザインのバリエーションを増やすことは重要なことだと思います。 グラフィックデザインであれば様々な書体を使い分けたりできますが、WebサイトやアプリのUIとなると視認性や可読性の問題からフォント選びが難しくなり、結局システムフォントに落ち着いてしまうこともあるでしょう。 今回はUIに使えるようなフォントを以下の基準で選別しました。 1. 視認性・可読性が高い 2. ウェイトの種類が豊富 3. 入手しやすい（フリーフォントなど）これらを満たす日本語書体を探すとなると有料かつ数も少ないため、欧文のみに絞って8書体を選びました。もちろんそのまま使ってもいいし、ヒラギノ角ゴやNoto Sans CJK JPなどの無料の和文書体と合わせて使えます。 それぞれのフォントに、視認性（誤読がなく見やすいか）、可読性（読みやすく疲れないか）、汎用性
『フォントのホントの話をします。』
「あなたは普段、どんな文字を使っていますか？」 この質問に即答できる方って意外と少ないのではないでしょうか。私たちは毎日のように紙の上や、スクリーン上でなにかしらの文字を見て生活しています。ただ、文字の成す意味に敏感であっても、その意味をかたどる文字そのものに意識ってほとんど向かいませんよね。 私たちにとって文字ってなんだろう？フォント、タイポグラフィーってどういうことだろう？ 基本的なことだけれども、知っているようで知らない 。そんな文字の世界のことを、株式会社モリサワ MORISAWA BRAND NEW Lab のデザイナー近藤さんとroom-composite代表兼アートディレクターのカイシトモヤさんに、McCANN MILLENNIALS主催のイベント「木曜日のミレニアルズ」にて、ひもといていただきました。 ◆株式会社モリサワ MORISAWA BRAND NEW Lab 近藤さ
文字詰めできるCSSのfont-feature-settingsプロパティについて検証してみました | briccolog
検証結果詳細 Windows（メイリオ） 見たまんまですが何も変わりません。前述の記事にもあるように、メイリオはOpenTypeフォントではあるものの、プロポーショナルメトリクスを含まないので、font-feature-settingsプロパティの影響を受けません。 Windows（游ゴシック） font-feature-settings:palt; 約物（句読点、かぎ括弧、中黒）を含む和文フォントの文字間がきちんと詰まっています。 行頭がかぎ括弧や中黒になっている場合でも、ツラがそろっています。 全角英数字の文字間も詰まってますが、半角英数字とは異なる文字幅になっています。 font-feature-settings:pkna; 仮名や仮名関連の字形については文字間が詰まってます。 約物の前後についてはデフォルト同様に字詰めが効いていません。 Mac OS X (El Capitan)
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
【絶対見たことある！】デザイナーの中で流行のフォント４選！！ | ベーコンさんの世界ブログ
デザイナーのベーコン（@dogdog464646）です！！ プレゼン資料作りにも役立つ、デザイナーがついつい使ってしまうフォント4つを選んで解説しました！ 「フォントにお金を出すのはちょっと…」という方のために無料フォントを紹介します。 いいフォントを使うと明らかにデザインが締まりますので、新しいフォントにチャレンジしてみてくださいね。 １つめ『DSきりぎりす』 (DS-kirigirisu) 「DSきりぎりす」このフォントはすごいです。 ポケモンで言ったらポッチャマ。GLAYで言ったらTERU。ドラゴンボールで言ったらベジータ。つまりスーパーヒーロー！2016年もまだまだ色んな所で使われていますね。 ▼DSきりぎりす (DS-kirigirisu) (¥16,500 ） こんな感じで使われている ●コンビニ各社で使われている ファミマのクッキーエッグタルト。あっちこっちきりぎりすフォント
かっこ良くて使える！2015年春の英語/欧文無料フリーフォント50+ | co-jin
かっこいい無料の英語/欧文フォントが目白押しの2015年春。 かっこいい上に即現場で使える英語/欧文無料フリーフォントがたくさんありましたのでまとめてみました。 無料フォントのなかでも最も使えるのが商用利用可能なフォントですが、今回のまとめには多数の商用利用可能な無料フォントがありますので、ぜひともチェックしてみてくださいね。 デザインのご参考になれば幸いです。 なお、ライセンス形態は作者の都合などによって変更される場合があります。 ご利用の際は、各フォントのライセンスを再度お確かめの上、ご利用ください。 セリフ Dollar Bill 商用利用可 Dollar Bill サンセリフ geomanist 商用利用可 geomanist BEBAS-TAM FONT FAMILY 商用利用可 BEBAS-TAM FONT FAMILY Nurjan 商用利用可 Nurjan Slot 商用利
Webサイト高速化のためのWebフォントとソーシャルボタンを遅延読み込みさせるすべらない話 | 株式会社cherry-pick
いつも読んでくださりありがとうございます、あ、及川です。 SREスタッフが日々の活動内容や学びを更新している「SRE BLOG」ですが、引っ越しました。 Movable Typeを活用しているWeb制作に関わっているとお仕事としてもよくある引っ越しですが、なぜ引っ越したのか、具体的にどんなことをしたのか、などなど、せっかくなのでまとめておきます。 レスポンシブWebデザインの設計の基本 なぜ引っ越したのか？ 「なぜ会社としてブログを運営しているのか？」 ブログの定期的な更新を続けることは、情報収集や記事作成の点でもそれなりに労力のいることですし、お金に変わることではありません。ではなぜWeb制作会社なのにブログを更新し続けるのか。 キレイな言葉（笑）を並べると次のようになります お客様や外部パートナーにSREが何ができるのかを知っていただく SREを知らない人に見つけてもらう機会を増やす
日本語Webフォントの革命 - 3846masa's memo
日本語Webフォントに革命がおきた． 詳しくは続きを読んでくれ． ちょっと大きく出てみた． 実装についての記事はこちら この記事で言いたいこと 動的に日本語フォントのサブセットを作成してくれるOSSを作りました． サンプルページはこちら 臨時のサンプルページはこちら 追記 herokuが落ちてる，メモリ不足だな．早い所Dockerfileつくろう． 追追記 herokuで運用は再検討したほうがよさそう．「こういうこともできます」の事例ということでひとつ． （やっぱり普通のサーバで動かす分には大丈夫そうな気がする．どうだろう） そんなわけで，どうぞご利用ください。 （ちなみに粗い作りなので，pull-requestやissue投稿をしてくださると嬉しいです．） 何が革命なんだ 革命が起きたというけど，どこが革命なの？ 僕には革命が起きたようには思えないけど そんなこと言わんといて，泣くわ．
ウェブ・フォントの読み込み - Weblog - Hail2u.net
ウェブ・フォントも完全に行き渡り、今はどう効率的に配信するかについて多くの時間を割くようになった。Google Fontsの低め安定路線を見限り、TypeKitやFonts.comへ鞍替えする人々も増えた。それと同時に自前でホスティングする人々も徐々にその数を増やしており、どれが最適解なのか一応の結論が出るにはもう少しかかるだろう。まず、ウェブ・フォントの読み込みにおいてどのようなアプローチがあり、どのようなメリット、そしてデメリットがあるのだろうか。 TypeKit等に頼るにしろ、自前でホスティングするにしろ、もちろん最終的にはウェブ・フォントをブラウザーに送りつける必要がある。読み込みとはまさにその部分の話だ。話がややこしくなるので、多様な実装を意識した安全な書き方などについては触れない。 普通に@font-face定義を利用 @font-face定義をただ普通に書く場合のメリットは、
アートイベント 万国學生藝術展覧祭 | 使える日本語フォント大集結！商用利用OKのフォント36のまとめ！ | 學展 学展
みなさんこんばんは。さめちゃんです。 2014年もはと20日を切ったわけですが、本日は、持っていて絶対損はないフリーの日本語フォントをご紹介していきたいと思います。 その数36！！！！ これだけあれば、相当な事がないかぎり有料フォントはいらないかもしれません。 怒濤の日本語フォントまとめ http://jikasei.me/font/genshin/ 源真ゴシック 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 普段使いにおける使い勝手を重視したカスタマイズを施したフォント。 http://fontgraphic.jp/blog/item/130-fgpote.html FGポテ明 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 写植を紙焼きでボかしたような処理で、緩やかなグリフ曲線を描いた美しい仕上がりになっています。 http://fontgraphic
「ウェブ時代のデザイナーのための文字組入門 」に参加してきました - デザイナーのイラストノート
JUSO Coworkingで10/4に行われた「ウェブ時代のデザイナーのための文字組入門 」に参加してきました。講師はなんでやねんDTPで有名な大石さん。最近パンフレットなど印刷物をご依頼いただく機会も増え、本を買って読むもののなかなか疑問を解消できないわたしにはぴったりの勉強会でした。今回の記事はIllustratorで印刷物のデータを作る、という前提です。 そもそも文字組・文字詰めは何のため webデザインでは、デバイステキストを自由に詰めたり組んだりすることがむつかしいため、文字組・文字詰めと聞くと「なんか難しそう」と構えてしまいがちです。 私たちがよく使うフォントというのは、四角い箱の中でデザインされています。しかし日本語のように「ひらがな」「カタカナ」「漢字」と様々な文字の形があると、当然小さい形、大きい形が出てきます。また、約物と言われる「」や（）や・などは、隣り合うと何だか
どの環境でも「きれいなフォント」をCSSのfont-familyで指定するにはどうすべきか？ - Kurotei Databook
はじめに こんにちは、くろていです。先日、TwitterにてWindows/Mac間の違いにおいてのフォントの表示、内蔵しているフォントについて少し話し合いをしました。その内容を受け、「様々な環境の視点から」どう「きれいなフォント」を表示するかを考え、それをまとめ、みなさんに知って欲しいと思い、記事を書きました。 実装案 各OSに入っているデフォルトのフォントを把握する 様々な環境の視点からフォントを考え、指定するときには、もちろんそれぞれの環境のデフォルトに内蔵されているフォントを知ることが最重要です。それをまとめ、整理してみました。(ゴシック体のみ) Windows: MS Pゴシック, メイリオ(vista以降), 游ゴシック(8.1以降) Mac:ヒラギノ 角ゴシックProN W3,W6,W8, 游ゴシック(Mavericks以降), MS Pゴシック(Office for Mac
【CSS】font-familyを指定するな。ユーザー選択に任せよ。
参照：[CSS]俺好みのfont-family指定が最強に読みやすくてオススメ！ 上記記事にも直接コメントしましたが、これ以上他人様のブログで自説を展開するのもよろしくありませんので、ここに書きます。 まず前提として、ぼくは 「日本語文章に欧文フォントを指定すべきではない」 と考えています。 理由は上記記事のコメントにも書きましたが、 高さ・ウェイト・字幅・ベースライン等が揃わず 非常に不格好になる。 ためです。 具体例を出しましょう。 「Windows7 + IE9」 「デフォルトフォントにＭＳ Ｐゴシック指定 + ClearType有効」 環境において、どのように表示が不格好になるのか確認します。 font-family: Arial, sans-serif; とした際のサンプルが以下になります。 これを見て、どうでしょう？ 気にならない方もいらっしゃるのでしょうが、 僕に言わせれば「
Unityで日本語フォントを使う（モバイル編）
モバイル向けのUnityで日本語フォントを使うには、いくつかの厄介ごとをクリアしなければいけない。出来ないことはないのだけれど、まあ、あまり使いやすくはできていないと考えておいた方がいいだろう。 まず、日本語云々の前にいくつかの前提を確認しておこう。モバイル向けのUnityではフォントのダイナミックレンダリングをサポートしていない。これはつまり、フォントはあらかじめビットマップ化しておく必要があるということだ。そしてそのビットマップは１枚のalpha 8テクスチャに収めなければいけない。 ここで問題になるのが、各ハードウェアにおける最大テクスチャサイズの制限だ。例えばiPhone 3G (PowerVR MBX Lite)では、テクスチャサイズは1024x1024までに制限されている。これは、日本語で使う文字を全て格納するには、だいぶ手狭なサイズだ。 確認のためにサンプルプロジェクトを用意
TypeButter – デバイスフォントにオプティカルカーニングを施せるjQueryプラグイン – creamu
これはすごい。TypeButterは、デバイスフォントにオプティカルカーニングを施せるjQueryプラグインです。 和文書体は未確認ですが、欧文書体ではいい感じの見え方になっています。 TypeButter
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
機械彫刻用標準書体フォント
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
4kakudez.com
deform.jp - このウェブサイトは販売用です！ - 日本 アート デザイン デジタル ブランド ユニーク ヶ月 地図 リソースおよび情報
ロゴまでWebフォント化! とうとうテンプレートの画像を全部なくしたった
