欧文フォントは歴史と紐づけるとまじでわかりやすい｜ありさん欧文フォントは歴史と紐づけるとまじでわかりやすい 1,124 ありさん 2021年5月25日 18:54 ダウンロード copy #デザイン #フォント 1,124 3人がオススメしています この記事が気に入ったらサポートをしてみませんか？ 記事をサポート
Webデザイナーなら知っておきたいWebタイポグラフィの基本 | FICCナレッジブログ | FICC
Webサイトを閲覧していて、文字を読まないということは滅多にありません。情報アーキテクチャの先駆者として世界的に有名なInformation Architectsは、「Web Design is 95% Typograpy」という記事で、「Webデザインの95%はタイポグラフィである」と述べています。 私たちの行動は文字によって喚起されます。例えば、オンラインショッピングをするときに、商品のイメージだけで購入することはほとんどないのではないでしょうか。価格をはじめ、特徴や仕様、レビューなど、文字が伝える情報を咀嚼して購買を決定しているはずです。オンラインショップは実店舗とは違い、商品を手にとって確認することができませんから、文字から伝わる情報がより重要性を増すのです。 これらは、タイポグラフィのデザインがWebデザインにとって無くてはならない役割を担っている証拠だと言えるでしょう。 それで
デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周りのお話
こんにちは。TAK(@tak_dcxi)です。 今回記事にするのはタイトル通り「デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周り」についてです。以前ツイートしましたが、特に説明もなかったので自分の備忘録も兼ねて。 Androidに明朝体は無い Apple製品しか利用しないデザイナーの方に話したら非常に驚かれるのですが、Androidにはデフォルトで明朝体は入っていないです。 よく明朝体マシマシのデザインを見かけたりするのですが、デバイスフォントだけではAndroidでそのデザインを実現することは不可能だと思っておいたほうが良いでしょう。 ただ、明朝体のWebフォントを利用すればAndroidでも明朝体は表示できるので、デザイン的に明朝体が必須って場合はWebフォントを利用しない手は無いと思います。 個人的見解ですが、デザイン重視なら明朝体はGoogle FontsでN
令和元年ベストのfont-familyはこれだ / Better font-family 2019 in Japanese - Speaker Deck
🦠🦠🦠このスライドの内容の更新して記事にしたので、ICS MEDIAのほうを参照ください🦠🦠🦠 2020年に最適なfont-familyの書き方 - ICS MEDIA https://ics.media/entry/200317/ --- OSやブラウザのアップデートによりウェブサイトのフォントは影響を受けてきました。最近だとiOS 13 Safariでフォントが激太りを起こしたり、macOS CatalinaとChromeの組み合わせで明朝体化するウェブサイトが多発しました。 他にも「ＭＳ Ｐゴシック」の呪縛、「游ゴシック」の薄さ問題、アンチエイリアスの変化など問題はつきません。このライトニングトークでは、現代の最適解としてのフォント指定を紹介します。 Website fonts have been affected by OS and Browser updates. R
ウェブフォント今昔物語
多言語化対応における TypeScript の型定義を通して開発のしやすさについて考えた / TSKaigi TypeScript Multilingualization
SF Symbolsの使い方とカスタマイズの仕方 - くらげだらけ
こんにちは、くだくらげです。 私はSketchもFigmaも両方使って仕事していますが、最近になって両アプリともOpenType Featureへの対応をアップデートに入れてきていることはご存知でしょうか？ 私はこの部分について前々から注目していたわけですが、その理由はSF Symbolsとの関係が大きいのではないかと睨んでいます。SF Symbolsがリリースされた直後の時期は、IllustratorやSketchでしかOpenType Featureを使うことができませんでした。この頃Sketchも一応利用できるという程度でした（正直現状も使いやすいとも思えないですが…）。それが2019年9月、10月辺りでFigmaもOpenType Featureサポートし、Sketchもその辺りの改善を加えてきました。 ということで、UIツールを提供している各社もサポートし気にしているであろうSF
macOS Catalinaでヒラギノ角ゴPro/ProNがなくなって困ってるfont-familyの設定を考える。｜榊原昌彦
macOS CatalinaのChrome 77のフォント問題。 勘違いしている人が多いので説明。 Chromeのデフォルトだった「ヒラギノ角ゴシック ProN」がCatalinaで未バンドルになる ↓ 該当するフォントがなくなったため、Sans Serifが明朝体で表示される ↓ フォント指定の甘いサイトは全部明朝体に！ pic.twitter.com/Cil92P8PGO — 池田 泰延 (@clockmaker) October 8, 2019 注：本記事はベストプラクティス紹介ではありません。記事内のフォント指定はわかりやすさを優先しているため、英語フォント名は割愛しておりますので、このまま利用すると意図していないフォントになることがあることご注意ください。この問題です。池田さんが書いてますが、端的にいうと「フォント指定が甘い」から起きています（Sans Serifがなぜか明朝体で
ウェブサイトに適用する游ゴシックフォントを見直しまくった最終解 - Corredor
拙作のノーマライズ CSS ライブラリ、「Neo's Normalize」を見直していたところ、Windows の Chrome ブラウザで適用されている游ゴシックフォントがかすれていた。 「あれ？@font-face で游ゴシック Medium を指定してるのにな？」と思い、設定を見直したところ、コレが効かなくなっていた。 当時 Neo's Normalize を作る際、それなりに調査しまくった結果だったのだが、どうも仕様が変わっていたようなので、OS・ブラウザごとに挙動を見直すことにした。今回はその研究結果をまとめる。 游ゴシックフォントに関する基礎知識のおさらい Chrome で効かなくなっていた @font-face font-weight: 500 は効いたが、副作用が避けられない Chrome で游ゴシック Medium を使うのは諦める 別解 : 潔く Regular フォン
Webフォントを最速で始めるために。FONTPLUSの使いかたを公開しました｜FONTPLUS
こんにちは、FONTPLUSです。今回は新しいコンテンツのお知らせです。その名も「使いかた」。 以前よりはずっと身近になったWebフォントですが、いざ導入を検討しよう！ となったときには進行的に差し迫った状況なことが多いのではないでしょうか？ サイト制作のスケジュールの中では、要件定義に潤沢な期間が持てないことはしばしばですし、年度末など、バタバタする時期はなおさらですよね。 そんなまっただ中だからこそ、わたしたちはFONTPLUSの「使いかた」を公開したんです。 さて、「Webフォント、今回の案件で使ってみるかな」と思ったときに、みなさんはまず何をするでしょうか？ Webデザイナーなら、フォントを使ってトンマナをしっかり作り上げたい。 Web担当者やWebディレクターなら、ブランディングやガバナンスの観点で特定のフォントを導入したい。 出発点としては、こんな感じかと思います。 次に、どの
webフォントを120%活用するための基礎知識&最新動向 - Speaker Deck
## webフォント/OpenTypeの仕様 - CSS Fonts Module Level 3 - https://www.w3.org/TR/css-fonts-3/ - OpenType Font Variations overview - Typography | Microsoft Docs - https://docs.microsoft.com/ja-jp/typography/opentype/spec/otvaroverview - svg - Scalable vector graphics table - Typography | Microsoft Docs - https://docs.microsoft.com/ja-jp/typography/opentype/spec/svg ## コーポレートフォント - 小林章×小林豊 | こちら、銀座 資生堂 センデ
コード埋め込み機能（β）用のフォントを作りました｜佐賀野 宇宙
どうも、ピースオブケイクでデザイナーやってる佐賀野です。 先日noteでコード埋め込み機能（β）が実装されました。 実は今回、このコード挿入機能にあわせてnote独自の等幅フォントを開発、実装しています。その名も「note monospace」。 この note monospace についてちょっとご紹介させていただきます。 開発の経緯 コード挿入機能の実装にある目処がたった段階で、note開発チーム内で「noteオリジナルの等幅フォントがあったら面白いね」という話が軽く持ち上がりました。 必須要件ではないのでそのままデバイス依存の等幅フォントを表示するだけでもよかったのですが、等幅フォントにチャレンジする良い機会には違いないので、土日を使って（半ば勝手に）プロトタイプを作成。その後、社内で見てもらい実装の許可をもらった後、隙間時間でブラッシュアップを続け、埋め込み機能と同時公開となりまし
Glyphsでフォントを作ろう 第1回｜佐賀野 宇宙
noteをはじめてみる。 何を書こうか少々迷ったが、フォント作成ソフト「Glyphs」を使ったオリジナル欧文フォントの作成方法を書いていこうと思う。 一度に書くとしんどいので何回かに分けて書いていくつもり。まずこの第一回ではつかみの部分から。 ざっくりとした説明になるので、詳しい操作方法については取扱説明書になるGlyphsハンドブックを参照してほしい（日本語版あり）。 なお、Glyphsの扱いはほとんど我流で通してきたので、間違っていたり効率の悪いやり方をしている場合がある。そんな点があったらどんどん指摘していただけるとありがたい。 環境を整えよう まずはGlyphsの導入から。必要なのはMacとGlyphs（のライセンス）の2つ。 聞くところによるとGlyphsの開発者であるGeorg Seifert氏はWindows版を作る気がさらさら無いようなので、フォント作成に興味のあるWind
ウェブサイトでシステムフォント
GoogleのRobotoや、AppleのSan Franciscoなど、OSベンダーが独自のフォントを開発し、自社製品のUIにシステムフォントとして採用する、という事例が相次いでいます。これらのフォントは、プラットフォームの特性を考慮して最適化されたもの（あるいは最適なものとして選ばれたもの）と言え、かつ今後のOSのアップデートにともなってさらに改善されることも期待できます。また、ユーザーがそのシステムを操作するときにもっとも頻繁に触れる、つまりもっとも見慣れているフォントでもあります。というわけで、これらシステムフォントをウェブサイトのUIに採用するというのはかなり良いアイデアに思えます。 一方で、システムフォントはあくまでUIのためのもので、長い文章などには向かない場合もあるので、コンテンツ部分は別のフォントを指定すると良いかもしれません。たとえばMediumなどではそのようなアプロ
RightFont for Mac – すべての Mac に必要なただ一つのフォント マネージャ :: [ FLAT ] Develop | ONO TAKEHIKO from aguije inc.
Mac 内のフォント管理にながらく FontExplorer X Pro を使ってきたが、あらゆる面で機能を凌駕するフォント マネージャが登場していたので閃光の様に乗り換えた。アイ・アム・ フラッシュ 。トライアルのダウンロードができないところがやや心配だったものの、ウェブサイトからしてしっかりしている感が伝わったので Team License で購入してもらった。 結果、購入して本当に良かったと思える。太陽系に住んでいる全ての Mac ユーザーが使えばいい。それはまあ言い過ぎだとしても、ウェブなり DTP なりデザイン業で大量のフォントを扱われている方には導入をおすすめせざるを得ない。 Sync! Sync! Sync! RightFont はライブラリをフォルダで管理する仕組みとなっており Dropbox と Google Drive 内へのライブラリ設置をサポートしています。つまり複
![RightFont for Mac – すべての Mac に必要なただ一つのフォント マネージャ :: [ FLAT ] Develop | ONO TAKEHIKO from aguije inc.](https://cdn-ak-scissors.b.st-hatena.com/image/square/b11a137f67576a9a5f617a842ef72a6c94887edd/height=288;version=1;width=512/http%3A%2F%2Fflat.press%2Fwp%2Fwp-content%2Fuploads%2F2015%2F12%2Feyecatch-medium.jpg)
Chrome 41 Betaのデフォルト日本語フォント - Unreviewed
Windows 最近、というほどでもありませんが、デバイスフォント（OSなどにインストールされているフォント）を多用したサイトが増えています。その際、Windowsではメイリオ（Meiryo）を指定することも多いと思いますが、Chrome 41 Betaでは、デフォルトの日本語フォントがメイリオに変わりました。 Windowsのブラウザーでは、sans-serifのデフォルト日本語フォントとして長らくＭＳ Ｐゴシック（MS PGothic）が使われてきましたが、その状況は変わりつつあります。 Internet Explorer 11では CSSによるフォント指定がなければ、ＭＳ Ｐゴシック CSSのsans-serifは、メイリオ が使われています。 既定のフォントの変更 (Windows) Google Chromeも41 Beta Channelで CSSによるフォント指定がなければ、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
web-typography-glossary/README.md at master · fontplus/web-typography-glossary
モダン日本語フォント指定
Adobe MAX Japan 2018 Webフォントを120%活用するための基礎知識＆最新動向 - Adobe MAX Japan 2018 ビデオアーカイブ
FONTBEAR.NET | 商用可能なフリーフォントを検索！
https://github.com/cognitom/symbol-font-in-web/blob/master/src/markdown/08-%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9%E3%83%BBSketch%E7%B7%A8.md
