Webブラウザにおける文字のアンチエイリアスの現状の最適解｜dwango creators' blog（ドワンゴクリエイターズブログ）
Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります
Variable Fontについて - console.blog(self);
Goodpatch Advent Calendar 2016の7日目！ フォントもくもく会 #5でVariable Fontについて調べてみた。2016年9月にVariable Fontというものが発表された。ひとつのフォントファイルで、さまざまなウェイトで表示ができる。 ワルシャワで開催中のATypIカンファレンスにて、バリアブルフォントと呼ばれる新しいタイプのフォントが世界に紹介されました。Apple、Google、Microsoft、およびアドビが共同で開発したバリアブルフォントは、ジョン ハドソン（John Hudson）の言葉を借りれば「ひとつのファイルでありながら複数のフォントのように動作する」フォントです。ひとつのフォントファイルを使い、ファイルサイズを拡大することなくウェイト（太さ）や幅やその他の属性を無限に変更することができたらどうなるか、またデザインにおいてそれがどのよ
游ゴシックは何故Windowsでかすれて見えるのか - Ryusei’s Notes (a.k.a. M59のブログ)
この記事は2016年当時の状況を書いています。その後のバージョンアップで、Windowsでのフォントレンダリングは改善され、ガンマ補正周りのエラーはなくなっているようです。当時の状況を資料として残しておきますが、記事を参照する場合はご注意ください。 TL;DR 游ゴシック体は単に細いから薄いのではなく、ガンマ補正が2重、3重に掛かっているために、グレーが本来よりも明るくなりすぎている。ガンマ補正を逆に掛けると、正常な表示になる。 かすれた游ゴシック Windowsでは游ゴシックがかすれて見える。細字だと薄くて読みづらいから、より太いウェイトを指定しろという話もある。（Windowsで游ゴシックが汚いのは、結局誰が悪いのか？ | Cherry Pie Webなど）だが、かすれて見える原因は、ウェイトが細すぎるからではない。 例えば、本文に游ゴシックを使っているWIREDの記事（「癌」という名
El Capitan登場で、CSS font-familyはこう変更しよう | ほりべあぶろぐ
Mac OS X 10.11 El Capitanの登場で新たなフォントが使えるようになったので、CSS font-familyの変更例を紹介します。 El Capitanの新フォント OS X El Capitanでは、新たに4つのフォント「クレー」「筑紫A丸ゴシック」「筑紫B丸ゴシック」「游明朝体+36ポかな」が追加されました。さらに、おなじみ「ヒラギノ角ゴ」に新たなウェイトが追加され、W0〜W9までの全10ウェイトをすべて利用できるようになりました。 OS X El Capitanには4種の新しい日本語フォントが追加！ 新フォントに関しては、普通のウェブサイトで使うことはあまりないかもしれません（使っても面白そうだと思います）が、ヒラギノ角ゴの利用に関してはフォント名の変更という注意点があります。 Hiragino Kaku Gothic ProN → Hiragino Sans ヒ
Apple の新フォント San Francisco の秘密
iOS 9 が一般公開されました。気づきにくいところですが、実はこの iOS 9 から、システムフォントが Helvetica Neue から、Apple が新たに開発した San Francisco フォントに変更されています。 San Francisco は Apple Watch のシステムフォントとして既に採用されていましたが、Apple Watch にとどまらず、iOS 9 や次期 Mac OS X “El Capitan” のシステムフォントとしても使われるようになります。 Apple WatchApple は、初代 iPhone からずっと、iOS のシステムフォントとしては Helvetica を採用してきました。また、Mac OS X でも 10.10 Yosemite からは、それまで使用していた Lucida Grande から Helvetica へと変更しています
フォント入門I 第一回「フォントの種類、値段」 - 気刊びびび
せっかく書くことがないんだし、フォントのことでも書いていこうと思う。一度に書ききれる量には限界があるので、シリーズ化していきたい。フォントのことは本当に*1よく知らないけど、同人誌とかでフォントを使っていきたいって人向けの記事にしていく予定なので、既にある程度の知識があるよ、モリサワパスポート契約してるよ、写研大好き、という人は何も言わずにタブを閉じよう。本講義ではフォントの基礎的知識を学び、同人誌作成等に必要な理解を得ることを目標としている。評価は出席点による。 第一回の内容は「フォントの種類、値段」です。長いですがお付き合い頂ければ。 フォントっていろんな種類があるの？ 書体を種類分けするときの一番大きな括りは、書体のジャンルでしょうね。「明朝体」「ゴシック体」といったアレです。ジャンルによって見た目のイメージとかが変わってくるので、場面によって使い分けることがほとんどです。以下に代表
CSS での OpenType 機能の構文
この機能は、一連の字形を「合字」と呼ばれる 1 つの字形に置き換えます。合字は、タイポグラフィの目的で好んで使用されます。この機能を有効にすると、通常の状況ではデザイナーやベンダーの審査に使用するような合字が挿入されます。 この合字機能は、デフォルトで有効です。そのため、通常は CSS を記述しなくても動作します。ただし、Chrome ではデフォルトで有効になりません。また、Safari（Mac または iOS）では無効にできません。Chrome と Firefox の一部のバージョンでは、スペースを含む合字で問題が発生します。 .class { font-variant-ligatures: common-ligatures; -moz-font-feature-settings: "liga", "clig"; -webkit-font-feature-settings: "liga"
デザインに効果的なフォントの選び方を身につけよう！レジュメに適したフォントと避けたいフォント
フォントはコミュニケーションデザインにおいて重要なツールです。 ロゴに使うフォント、コピーに使うフォント、見出しに使うフォント、本文に使うフォント、WebやUXデザインにおいても非常に重要な役割です。 文字中心で情報を整理して見せる必要があり、多くの人が利用し、スクリーンとプリントの両方に対応する必要があるレジュメのデザインに適したフォントと避けたいフォントを紹介します。 実例を元に、デザインに適したフォントの選び方を身につけましょう。 20 Best and Worst Fonts to Use on Your Resume 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 また、下記を参考にフォントの情報を加えました。 フォントの選び方の参考になる！世界で活躍している有名デザイナーたちが選んだフォントのランキング レジュメのデザイン
コーディングに最適な日本語対応の等幅フォントSource Han Code JPとは – ICS MEDIA
コーディング向けの日本語対応の等幅フォント「Sourceソース Hanハン Codeコード JPジェイピー（和名：源ノ角ゴシック Code JP）」が、2015年6月4日に公開されました。「源ノ角ゴシック Code JP」は、プログラミングやHTML/CSSのコーディング、ターミナルでのテキスト表示など、和欧表示用フォントとしての利用を想定されたフォントです。 ダウンロードはこちらから Release Fonts (OTF, OTC) · adobe-fonts/source-han-code-jp · GitHub ※このフォントは無償でダウンロード可能です。OTCとTTFの両方のフォーマットで配布されているので、Windows/macOSともに簡単にインストールできます。 ※上記リンクの「Fonts version ［バージョン番号］ (OTF, OTC)」となってい箇所の［Sourc
WWDC 2015 ―Mac OS X El Capitanに筑紫書体―
昨夜あっていたWWDC 2015のお話。 WWDCはAppleが毎年やっている、iOSとOS Xの話題がメインの開発者向けイベント。毎年この時期になると、色々なニュースサイトやブログがその内容の予想を始め、今回に関して言えば、iOS、OS X、あとは音楽配信サービスの話が盛り上がっていた。で、いざ蓋を開けてみると中身は実際そうだったんだけど、その中で一つ個人的にめちゃくちゃテンションの上がるニュースがあった。 それが、Mac OSに4つの新しい日本語フォントが加わるニュース。 僕は今朝これを見て「Appleやりおった！」と一人電車の中でめちゃくちゃ興奮していたんだけど、残念なことに？一日経ってみてもネットに上がってくるWWDCのまとめ記事ではこの話題の取り扱いがめちゃくちゃ小さく、ものによっては完全にスルーしているのもある。 記者の方がこのニュースにあまりインパクトを感じていないんだと思う
デザイナーはなぜMS Pゴシックを使わないのか? - エディトリアルデザイナーに聞いてみた
デザインを語る上で重要な要素のひとつ、「フォント」。デザインを実際に手がける人だけでなく、それを見る多くの人にとってなじみ深いフォントとして、Windowsのプリインストールフォント「MS Pゴシック」は代表的なもののひとつかもしれません。 「MS Pゴシック」 「MS Pゴシック」は過去にマイナビニュースで実施した美大生の「お気に入りフォント」アンケートにも名前が挙がった実力派(?)ですが、実際に日々グラフィック/エディトリアルデザインを手がけているデザイナーの目には、この定番フォントはどう映るのでしょうか。 今回は、デザイン会社にてエディトリアルデザイン/Webのレイアウトデザインを手がけているSさんに、「MS Pゴシック」についての率直な思いを伺いました。 ――「MS Pゴシック」、デザイン業務で使うことはありますか? 私は主にエディトリアル(雑誌や書籍など)、グラフィック、Web領
Webフォントを分割、というか削りたい - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 @font-face { font-family: "FontAwesome"; src: url('/font/fontawesome-webfont.eot'); /* IE9 Compat Modes */ src: url('/font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/font/fontawesome-webfont.woff') format('woff'), /* Modern Browsers */ url('/font/f
Inclusive Technology Consulting - Bocoup
Look, I like good typography as much as the next person—maybe even a little more. When a CSS property came along with promises to doctor all my type with ligatures and carefully calculated kerning—not some half-assed tracking, but real kerning—I jumped at it. I put text-rendering: optimizeLegibility on headings, body copy, navigation links; I slapped it on images just in case a ligature might appe
Google Web Fonts を使わずに、日本語 Web フォントを（Noto Sans）自前で標準化 - Qiita
Google Web Fonts を使わずに、日本語 Web フォントを（Noto Sans）自前で標準化CSSJavaScriptCSS3webfont Google Web Fonts を使わずに、日本語 Web フォント（Noto Sans）を自前で標準化 表題の件、実装にあたって行った作業は以下の通り。 でもまだ本番環境で適用はしていませんので、参考にされる方はご留意下さい。 リリース後にアップデートしますが、一旦備忘録。 Web Font の取得 ダウンロードしたフォントファイル（.otf）を、ツールを利用して第一水準漢字のみに絞ってサブセット化 サブセット化した .otf ファイルから、.eot 及び .woff 形式のフォントファイルを作成 標準化を前提にファイルの構成を考える CSS 書く ※詳細未検証：CSS に記述する事で読み込む事になるフォントファイルは、同一ドメイン
視認性の高いプログラミングフォント「Myrica」をWindows＋Sublime Textで使う方法
Myricaとは Myrica （ミリカ）は、無料で使えるプログラミング用 TrueType フォントです。 視認性、判別性 が高くなるように、複数のフォントから合成され作成されました。 Myricaの特徴Myricaは、多くの特徴をRictyから継承しています。 主な特徴は、以下のように挙げられています。 ASCII文字は「Inconsolata」が適用されます。それ以外の文字には「源真ゴシック」または「Mgen+」が適用されます。半角文字と全角文字の横幅の比が 1:2 に調整されています。視認性の高い日本語文字 (半濁音など) が使用できます。Rictyにない特徴Rictyにない特徴として、ASCII/ひらがな/カタカナにヒンティング情報が付加されています。 これにより、低解像度や、小さな文字サイズで表示させても、可読性が高くなるようになっています。 特徴のイメージ特徴に関するイメージ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モダン日本語フォント指定
2015年のフォント総括／鷹野 雅弘（スイッチ）
font-family
Googleフォントで好みのフォントを見つけるのはなかなか大変だけど、これを利用すると簡単に探せる！ -Font Library
GitHub - cognitom/symbols-for-sketch: Symbol font templates for Sketch.app
