細かすぎて伝わらないアンチエイリアスの話
はじめまして、デザイナーの越後です。 webフォント全盛の昨今ですが、まだまだ文字を画像化する機会も多く 画像で文字を扱うにしても、くっきりはっきり、意図した形でデザインがしたいものです。 そこで今回は「細かすぎて伝わらないアンチエイリアス」と題して、 少しマニアックなphotoshopでのフォント調整についてお話したいと思います。 おさらい：photoshopのアンチエイリアスについては、基本的には５種類 Photoshop上で文字を扱う際には、指定出来るアンチエイリアスは、 なし / シャープ / 鮮明 / 強く / 滑らかに の５種類です。 「なし」に関してはアンチエイリアスがかかっていないので、 文字のままのドットで表示されますが、 他の４つに関しては シャープ：文字が太い / くっきり 鮮明：文字が細い / くっきり 強く：文字が太い / なめらか 滑らかに：文字が細い / なめ
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
Apple San Francisco フォントのダウンロードとインストール
Apple San Francisco フォントのダウンロードとインストールについて紹介します。 概要 Macの画面デザインやモック画像を作成する場合にMac OS X のシステムフォントである、San Francisco フォントを利用できます。 ダウンロード https://developer.apple.com/fonts/ からダウンロードできますが、新しいWebページではダウンロード形式がdmgファイルとなり、dmgファイルを展開するとインストーラーが起動する仕組みのため、Macでのみ利用可能です。 https://developer.apple.com/fonts/にアクセスします。下図のページが表示されます。 ページを下にスクロールすると[Fonts]セクションにフォントのダウンロードボタンがあります。4つのフォント(San Francisco Pro, San Franci
サイズ感とバランスが大事！ レスポンシブにおける分量とフォントサイズ
行間と可読性 これまで、私たちはレスポンシブデザインにおけるフォントサイズと分量の関係について注目してきました。しかし、行間もまたユーザーの閲覧に影響を与えます。 行間は水平方向の動作に影響する ユーザーは水平にも垂直にもコンテンツを閲覧するため、テキストの行は、織物のように縦横無尽ではなく、水平に見ることをを促すべきです。 行間が詰まりすぎると、ユーザーの目の水平方向の動きを衰えさせ、テキストの左端の流し読みを促してしまう恐れがあります。また、ユーザーに同じ行を繰り返し読むことを強要する可能性もあります。一方、行間が緩すぎると、テキストの行が視覚的に「浮遊している」ように見えてしまいます。行は一つのまとまりの単位ではなくなり、垂直方向による流し読みがより難しくなってしまいます。 完璧な行間は存在しませんが、大体フォントサイズの150％が最適な場合が多いです。
Webにおいての理想的な行間とは？｜株式会社アクトゼロ｜クリエイティブブログ
おはようございます。お久しぶりです。GWもあっという間に終わり…いつもの忙しい日常が帰ってきましたね…。これから梅雨という少し憂鬱な季節がやって参りますが、適度にゆるーく乗り切りましょう！ 今日は行間についての記事です。Webでは、行間のとり方ひとつで読みやすさが全く変わります。ですので、文章を配置する際は、それぞれのフォントサイズに適正な行間を与えてあげることが重要となってきます。 一般的な行間のとり方 一般的には、文字が小さいほど行間を広くとるのが読みやすく、逆に大きな文字は行間が狭くても読みやすいと言われています。それには、下記のような理由が挙げられます。 小さい文字の時に行間が狭いと、一度に複数の行が視界に入ってきてしまうため、とても読みづらくなります。 大きい文字の場合は、文字そのものが大きいので視界に入る行は比較的少なくなります。 そのため、多少行間が狭くても読みやすさに問題は
iPhoneやAndroidで簡単デバッグ、改めてfont-familyについて考えてみる。メモ。 - まみやん技術メモ
Androidやタブレットで表示したときにWebページが最適化されるようレスポンスブデザインでコーディングしました。今回はAndroidアプリのLPだったので対象メインユーザーはAndroid端末の方なの。だからPCは除外で。 モバイル端末だけどPCと同じようにブラウザの開発者モードを開いてデバッグしたい・・・ と思って調べたらあった。iPhoneでのデバッグ方法はプログラマさんに教えてもらったから知ってたけどAndroidもできるのね♩使い方は簡単。主にはモバイル端末とPCをUSBケーブルで接続してアプリをインストールするだけ。便利だ！ ◆iPhoneでデバッグ 要チェック。iPhone/iPadで表示しているWebサイトに対して使えるWebインスペクタ·Mobile Safari Inspector MOONGIFT ◆Androidでデバッグ SDK不要Android端末のリモートデ
【保存版】Webフォントの使い方と無料のおすすめサイト一覧（日本語・欧文） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
先週、新婚旅行という人生最大級の贅沢を楽しんできたため、日本に帰ってきて放心状態になっている野田です。 もう少し逃げていたかった……現実から……。 という話は置いておいて。最近LIGのブログではフォントネタが頻繁に登場するようになってきたので、それに僕も便乗しようと思います。 Webに関わっている人でも、「フォントが大事なのはわかるけどWebフォントは設定していない……」 という人も多いんじゃないですか？ 今日はWebフォントの使い方とおすすめの無料で使えるWebフォントサービスをご紹介します。 「わからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！
webfont|test
Test up to three fonts You can choose a Google Font or a Websafe font from the list, write the exact name of a System Font or Upload a custom font file. It's a tool to test and analyze webfonts that you intend to use in your websites or projects. You can compare fonts from different sources (Google Fonts, System Fonts or any font file downloaded from internet), analyze their x-height, weights, cha
オープンソースのNotoSansはたった5分でWebフォントになる
オープンライセンスの日本語フォントNotoSansCJKをウェブフォントとして導入する2種類の方法をご紹介します。手持ちのフォントをWebfontとして使う際の注意とやり方も書きました。 このたびGoogleとAdobeが共同開発した日本語フォント NotoSansCJK は、太さが7種類もあって異字体にも対応してる上にオープンソースとあって非常に面白いことになりそうです。 でも、コメントを追っかけてたら「なんだ、Webフォントじゃないのか」って反応の人を随分見ました。 確かに Notoフォントファミリーの一部は既に CDN化された Google fontsで簡単に使えるようになってますけど、 NotoSans CJK も OpenType(.otf)形式だからネットにアップすれば即Webフォントになりますよ？(・∀・)？ 【 memo 】 本稿はNotoSans のWebフォント導入方法
Webフォント「Google web fonts」の使い方・実装手順メモ
商用・非商用を問わず無料で利用できるWebフォント、「Google web fonts」の実装方法をさっくりメモっておきたいと思います。 Google Web Fonts Google web fontsとは Webページ閲覧時、通常ではパソコンにインストールされているフォントしかブラウザで表示することが出来ませんが、「Webフォント」を使用すると任意のフォントを表示することが出来ます。 Googleの提供するGoogle Web Fontsはアカウント登録の必要も無く、実装が非常に簡単なそれの一つです。商用・非商用ともに無償で利用が可能と言うのもポイント:) ちなみに当サイトでも日付の表示とサイドバー・フッターの見出しにGoogle web fontsの「Coda」を使用しています。 Google web fontsの実装方法 実装の手順は3ステップ。 1.使いたいフォントを選択する 2
デザイナーに必須のフリーフォント集「20 High Quality Free Fonts Every Designer Should Own」
TOP > Design , Font > デザイナーに必須のフリーフォント集「20 High Quality Free Fonts Every Designer Should Own」 フリーで配布されているフォントでも、クオリティーが高く使いやすいフォントは多数存在しています。そんな中今回紹介する「20 High Quality Free Fonts Every Designer Should Own」は、普段のデザイン制作に是非取り入れてみたいフリーフォント集です。 （The League of Moveable Type – Sorts Mill Goudy） 基本ベースはシンプルですが、少し遊び心が詰まったフォントが多数紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Lost Type Co-op | ONRAMP
Typetester Compare fonts for the screen
Design Beautiful Typography One of the most popular applications for web designers is now a full-blown typography editor. Typetester classic that is known and loved by all is still online! Test and compare more than 2800 web fonts. The new Typetester is a WYSIWYG web typography editor. Create, export and share unlimited projects.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
chiepomme
SVG Icon Libraries and Custom Icon Font Organizer ❍ IcoMoon
Font−familyのベストな書き方 2015年版 | それからデザイン スタッフブログ
フォント好きのための定番まとめ！新着満載フリーのデザインフォントのまとめ -2014年4月 | コリス
インストールしているフォントを一覧表示できるWebサービス「wordmark.it」｜男子ハック