細かすぎて伝わらないアンチエイリアスの話
はじめまして、デザイナーの越後です。 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％が最適な場合が多いです。
Illustratorでの「合成フォント」のつくり方｜DTP Transit
「合成フォント」の作成手順 ［書式］メニューの［合成フォント...］をクリックします。 ［合成フォント］ダイアログボックスが開くので、［新規...］ボタンをクリックします。 ［新規合成フォント］ダイアログボックスで「名前」（合成フォント名）を入力します。トラブル回避のため、極力、英数字のみを使用し、記号類は使わないようにしましょう。 ［漢字］、［かな］、［全角約物］、［全角記号］、［半角欧文］、［半角数字］それぞれの文字種に、フォント（とウエイト）を指定していきます。Illustrator CS6以降は、複数の文字種を同時に設定することができます。 ［サンプルを表示］をクリックして、サンプルを表示します。［ズーム］を「400」や「800」に変更し、英数字の大きさ、ベースラインのバランスを調整します。 ［OK］ボタンをクリックすると、次のアラートが表示されるので［はい］をクリックします（その
これだけは抑えておきたい！定番英字フォント18選｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは、スイカは白いところまで食べる小林です。 今日は個人的主観で、よく使う、あるいは使いたいと思っている定番欧文フォントをご紹介したいと思います！ フォント選びで迷うと、ついつい、無難なフォントを使いがちですが、そのフォントの性質やディテール、成り立ちを知ることで、よりそのデザインにマッチしたフォントが選べるようになると思います！ セリフ体 Baskerville （バスカヴィル） 伝統、高貴さを感じさせる、1750年代にイギリスのジョン・バスカヴィル（John Baskerville）によって作られた、Transitional（※）フォントの代表格です。 バスカヴィルのフォントは当時のイギリスではなかなか受け入れられず、アメリカやフランスで多く使われたようです。 しかし今では堂々とした大文字などからイギリスを代表する書体デザインの一つと言われています。 Baskerville Ol
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端末のリモートデ
ブログ | AWRD
「新しい関係性のデザイン」を実践する、crQlr Awards Exhibition 巡回展レポート 2023年は、3回目となるcrQlr Awardsが開かれ、43カ国から140のプロジェクトが集まりました。今回のcrQlr Awards Exhibitionでは、2023年に開催されたcrQlr Awardsの受賞プロジェクトの中から「特別賞」と「審査員賞」の一部を抜粋して展示が行われました。それぞれの都市で、各拠点のサーキュラー・デザインに関連するプロジェクトが紹介され、多くの来場者が訪れました。その様子をレポートします。 2024/08/07(水) イベント レポート サステナブル建築の「ecoLogicStudio」が描く大気汚染対策と循環型経済 クリエイターとプロジェクトをつなぐプラットフォーム「AWRD」のインタビューシリーズ。アワードを通して活躍の幅を広げてきたクリエイター
Adobeから自由自在に新しいフォントを作り出せる技術「Project Faces」が登場
ソフトウェア会社のAdobeが、サンフランシスコで開催中の「Adobe Max 2015」で、開発中の新技術を披露する基調講演を行いました。基調講演ではさまざまな新しい技術が紹介されましたが、その中でも特に反響が大きかったのが「Project Faces」という、フォントの骨格を解析して自由自在に新しいフォントを作成できる技術です。 Adobe MAX 2015 - Sneaks - Project Faces - YouTube デザインの際に頭を悩ませることの1つは、そのプロジェクトに適したフォントを選ぶ作業。既存のフォントを使いたくないときは、フォントを変形させたりするのですが、その作業は時間がかかり過ぎるそうです。 その問題を解決すべくAdobeはアプリケーションを開発中。そのアプリケーションのプロトタイプをiPad上で動かすというデモが行われました。スクリーンに大きな「P」が表示
フォントオタ歓喜！ 「実例付きフォント字典」発売 使用イメージが分かる実例作品付きフォント見本帳
デザイン書・ビジュアル書を中心に出版するパイ インターナショナルより「実例付きフォント字典」が発売されました。 「実例付きフォント字典」表紙 フォント販売会社21社の和文書体1768種類を収録した見本帳で、特に人気の222書体に関して、フォントを使用した広告・装丁・商品パッケージなど実例作品が紹介されています。さまざまなフォントが実際にどんな使われ方をしているのかが一目で分かるのは、デザイナーはもちろんフォント好きにとっても楽しめそう。 MS明朝 TB丸ゴシック 游築見出し明朝体 筑紫書体各種 デザイナーとして実用的に役立てるのもよし、美しいフォントたちをうっとりと眺めるのもよし、A5判、432ページとボリュームタップリで価格は3800円（税別）です。デザイナーにもフォント好きにもたまらない一冊となっています。 （宮田智也） advertisement 関連記事 作風が変わってしまうな……
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
WEBデザイナーになるには
日本のWEBデザインをけん引し続けてきたテリー春子さんからの寄稿 WEBデザイナーになりたい学生のみなさんこんにちは。 テリー春子です。 WEBデザイナーになるにはどうしたいいのでしょうか？ そういった質問にこれまで1000回以上答えてきました。 私の答えはこうです。 「知りません」 そうわたしはWEBデザイナーになる方法を知らないのです。 唯一分かっていることと言えば、私がWEBデザイナーになれたというその事実だけです。 だからわたしはこう付け足します。 「わたしになれ」と。 初めてのホームページ作成 いわゆる「ファンサイト」と呼ばれるものをつくりました。 好きな作品についての二次創作や交流の場を提供するタイプのものです。 正直古いお話なので、今何かの役にたつかはわかりませんが、作成時期に言及がありませんでしたので昔話です。 レンタルサーバーは今はもうサービス終了したinfoseekが多
オープンソースの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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://typetuto.nonosso.net/basic/
Font−familyのベストな書き方 2015年版 | それからデザイン スタッフブログ
fontlab-studio
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
新着記事
フォント好きのための定番まとめ！新着満載フリーのデザインフォントのまとめ -2014年4月 | コリス