Webフォント読み込み戦略（2021年） - MOL
Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという
次世代のフォント技術 バリアブルフォントの世界 - ICS MEDIA
補完するのは登録された軸のみになります。たとえばitalの値が1種類しか登録されていないフォントはitalの値によらず一定の傾きをもちます。 オプティカルサイズとは、サイズに連動した文字のスタイルです。フォントサイズが小さなときは簡略化された表記、大きなときは細かく装飾されたフォント、というように設計されることがあります。 標準ではフォントサイズに依存しているため手動での変更はできませんが、一部のフォントでは変更が可能です。先ほどのデモにおいても、オプティカルサイズに応じて文字バランスが微妙に変更されることが確認できますね。 Roboto-Flexフォントを例に バリアブルフォントはまだそれほど普及していないこともあり、入手元がそれほど多くありません。今回は、オープンフォントライセンスで配布されているRoboto-Flexフォントを使用します。 GitHub - Roboto-Flex 記
AdobeやSketch、Affinityシリーズのアプリと連携可能で、フォントのプレビューなどが可能なフォントマネージャーアプリ「RightFont for Mac」の機能限定版がMac App Storeで公開。
AdobeやSketch、Affinityシリーズのアプリと連携可能で、フォントのプレビューなどが可能なフォントマネージャーアプリ「RightFont for Mac」の機能限定版がMac App Storeで公開されています。詳細は以下から。 RightFontは2015年にAdobe PhotoshopやSketch向けにプラグインを開発しているMarkly Teamが開発したMac/iOS対応のフォントマネージャーアプリで、フォントファミリーのグループビューやGoogle Fontsのダウンロード＆同期機能などが利用可能ですが、このRightFontのMac App Store版が今年08月頃から公開されていました。 RightFontは、Photoshop、InDesign、Illustrator、Sketchなどのデザインソフトウェアに完全に統合された、フォントのプレビュー、イン
ウェブ制作に活かすユニバーサルデザインの視点
この記事は、2019年12月7日に名古屋で開催された WCAN 2019 Winter での登壇内容をテキスト化したものです。アクセシビリティ Advent Calendar 2019 の 9日目のエントリーです。 当日使用したスライドは SpeakerDeck で公開しています。 ウェブ制作に活かすユニバーサルデザインの視点｜SpeakerDeck はじめに 「ユニバーサルデザインとウェブ」と聞くと、あまり馴染みがないように思われるかもしれません。しかし実は、ウェブは生まれながらにユニバーサルな性質を持っています。ワールド・ワイド・ウェブの考案者ティム・バーナーズ＝リーは、次のように述べています。 The power of the Web is in its universality. ウェブは、世界中の誰もが、自分の好きな場所で、好きなデバイスで、好きな時にアクセスすることができます。
Webサイト、プレゼン資料で差をつける！スタイリッシュな日本語フォント16選 : ニキビ跡
フォントを変えるとサイトや資料のイメージも変わる！ビジネスマンとして業務を行っているとWebサイトの更新やプレゼン資料の作成をする機会もあるかと思います。客観的なデータを活用したり、グラッフィックで見やすくしたりすることも重要ですが、「フォント」にもこだわると資料の質が高まります。Webサイトや資料のテイストにマッチした「フォント」を選ぶことで、クオリティを高めることができます。 「鉄瓶ゴシック」はゴツゴツとした質感が特徴的なフォントとなっています。見出しに活用されやすい漢字も含まれているので、Webサイトやチラシ作成に向いています。どこかレトロな雰囲気のあるフォントですので、そういった演出がしたいときにも向いています。 フォント配布ページ「スマートフォントUI」シャープな縦長フォント 「スマートフォントUI」は少し縦長のフォントとなっています。アルファベット、ひらがな、カタカナ問わず読み
文字詰めできるCSSのfont-feature-settingsプロパティについて検証してみました | briccolog
検証結果詳細 Windows（メイリオ） 見たまんまですが何も変わりません。前述の記事にもあるように、メイリオはOpenTypeフォントではあるものの、プロポーショナルメトリクスを含まないので、font-feature-settingsプロパティの影響を受けません。 Windows（游ゴシック） font-feature-settings:palt; 約物（句読点、かぎ括弧、中黒）を含む和文フォントの文字間がきちんと詰まっています。 行頭がかぎ括弧や中黒になっている場合でも、ツラがそろっています。 全角英数字の文字間も詰まってますが、半角英数字とは異なる文字幅になっています。 font-feature-settings:pkna; 仮名や仮名関連の字形については文字間が詰まってます。 約物の前後についてはデフォルト同様に字詰めが効いていません。 Mac OS X (El Capitan)
アプリ・ゲーム製作者必見！ 煩雑なライセンス契約が不要のモリサワのアプリ・ゲーム用フォント製品
乱立するアプリやゲームに、ユーザビリティの良さを保ちながら強い個性を持たせるには、優れたフォントの存在が欠かせません。 ところが、フォントの使用許諾の契約は思った以上に煩雑で手間がかかるものです。また、アプリやゲーム内の契約は完了していたけれど、いざ発表という段に至って「販促用ツールを作るのに別のライセンスが要るって知らなかったー!!」と右往左往した経験のある人は意外に多いのではないでしょうか。 そんなアプリ・ゲーム製作者にとって使い勝手のいいフォントパッケージ製品が、この度フォントの老舗モリサワから10/21に発売開始として発表されました。 「MORISAWA App Tools ONE」は、これまで個別の契約が必要だったアプリへの組込みと、アプリのプロモーション用デジタルコンテンツの制作に必要な書体を、好きなだけ利用できる新しいフォント製品です。モリサワフォントを中心とする341書体の
美しいWebフォントをストレスなく見てもらうための3つの設定
これだけのデータを落とすのにどのくらいかかるのでしょうか。通信環境にもよりますが 1MB で数秒程度はかかります。それだけの時間、画面に文字が表示されないのはちょっと困りますし、そもそも 3.2MB のデータはもっと小さくしたいものです。 ということで、今回は Web フォントを使いつつ、読者の方の負担を少しでも減らすために次の 3 つの対策をやってみたいと思います。 できるだけ小さいファイルを使えるようにする フォントファイルをキャッシュする(してもらう) Web フォントのロードを遅らせる できるだけ小さいファイルを使えるようにする フォントファイルは利用するブラウザの環境によって使われる形式が変わります。最新のフォーマットである WOFF 形式の場合は 1.5MB ですが、互換性が最も高い TTF ファイルは 3.2MB もあります。 そこで TTF 形式の場合は、圧縮ファイルも事前
正当派からクリエイティブなものまで、ハイクオリティなフリーフォント集「8 Fresh High-Quality Free Fonts」
TOP > Design , Font > 正当派からクリエイティブなものまで、ハイクオリティなフリーフォント集「8 Fresh High-Quality Free Fonts」 フォントはデザイナーにとってはとても重要なもので、常に新しい書体を探しているという方も多いと思います。今回照会するのは、正当派からクリエイティブなものまで、ハイクオリティなフリーフォントを集めたエントリー「8 Fresh High-Quality Free Fonts」です。 Dense Regular かっちりとした、美しいフォントから、あまり見ないタイプのフォントまで、様々なフォントがまとめられていました。今日はその中からいくつか気になったものをピックアップして照会したいと思います。 詳しくは以下 geogram typeface 規則性を持った、アルファベットと記号が組合わさったフォント。 Look
テキストを装飾する／NSAttributedStringの属性一覧 - Qiita
iOS 6 から、UILabel, UITextView, UITextFieldに、attributedText というNSAttributedString型のプロパティが追加されました。NSAttributedStringは文字列の属性を管理するクラスで、これを使用するとフォントや文字色、背景色、カーニング等の属性をテキスト内の指定範囲に対して適用することができるようになります。 基本的な実装手順 基本的な手順は次の通りです。 1. NSMutableAttributedStringオブジェクトを生成 initWithString:メソッドでオブジェクトを生成します。 NSString *str = @"NSAttributedString Sample"; NSMutableAttributedString *attrStr; attrStr = [[NSMutableAttribu
Appleが利用するフォントを徹底解剖 | ブログヘラルド
アップルが広告や宣伝にどのフォントを利用しているのか気になったことがあるだろうか？コンピュータのキー、MacのUI、iPhoneにはどのフォントが利用されているのだろうか？以下にアップルが利用するフォントを挙げていく。 ブランドアイデンティティ 全ての広告素材、プロモーション、アップルのウェブサイト、そして、光り輝く製品の箱には、アップルはミリアド・プロ・セミボールドと呼ばれるミリアドのバリエーションを利用している。サンセリフの書体であるミリアドは1992年にアドビによって初めてリリースされていた。現在、アップルだけでなく、グーグル（Gmailの最後の3文字）、リンクトイン、ロールスロイス、そして、ウォルマートもミリアドを採用している。アップルは2002年からミリアドの利用を始めている。 それ以前は、アップルはギャラモンの利用に拘っていた。アップルが利用していたフォントはアップル・ギャラモ
OpenTypeユーザーガイド—Adobe
Where do I get Adobe Originals? The majority of Adobe's fonts are available on fonts.adobe.com as part of the Adobe Fonts subscription library. For perpetual licenses, please visit our resellers: Type Network Monotype Fontspring Note: Adobe no longer provides enterprise-wide, term font licensing. Type Network and Monotype are authorized to handle these licenses on Adobe's behalf. Adobe discontinue
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今まで文字を読めなかった子がある書体に変えたら読めるようになった！その書体への感想や今後への期待の声が集まる
デザイナーこそ覚えておきたいCSS最新事情！ あなたの知らないfont-familyのイマ
のらもじ発見プロジェクトが小規模炎上していたようです(山本一郎) - 個人 - Yahoo!ニュース
2012年総まとめ：商用利用も無料、高品質な英語のフリーフォントのまとめ