「Meiryo UIも大っきらい!!」がWindows 11に対応 ～システムフォントの変更ツール【3月1日追記】／好みのフォントを選ぶだけのシンプルなデザイン。誤検知対策済みバージョンが公開
Webフォントの表示を最適化するテクニック
Webページに表示するフォントは通常、システムフォントとWebフォントの2種類があります。システムフォントはOSにインストールされているフォントで、Webフォントは表示用にフォントファイルを用意する必要があります。 WebフォントはさまざまなフォントをWebページに使用できるというメリットがありますが、パフォーマンス面でシステムフォントに劣るので使用を控えている人もいるかもしれません。Webフォントのフォントファイルを調整し、読み込みを最適化し、最大速度と最小のFOUTを実現するテクニックを紹介します。 5 steps to faster web fonts by Iain Bean 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Webフォントには最新のファイルフォーマットを使用する 2. font-displ
サブセットでWebフォントの軽量化
ミニマルなデザインが主流になってきてますますフォントのチョイスって重要だとつくずく感じております。 僕のフォントライブラリも古くなってきて、パッケージでなにかいいフォント欲しいなぁと最近はフォントを探しまくっております。 源柔ゴシックをサブセットしてWebフォントとして使う そんな僕の最近のお気に入りフォントの一つが自家製フォント工房さんが公開してくれている源柔ゴシックです。 源柔ゴシックはNotoSansを丸ゴシックに改良したフォントだそうです。詳細とダウンロードは自家製フォント工房さんWebサイトよりお願いします。 ライセンスに目を通したところ改変もWebフォントとしての利用も問題ないとのことで、サブセット化してWebフォントとして使ってみます。 なぜサブセットを行うか？ 日本語フォントは欧文フォントに比べて文字数が多く、データとしても大きくなります。 重い画像の読み込みに時間がかかる
当時存在していなかったフォント使用で偽造文書発覚 再び | 財経新聞
headless曰く、 Microsoftのフォント「Calibri」はパキスタンのシャリフ元首相が最高裁判所に提出した文書の偽造の証拠となっているが、カナダで再び偽造文書の証拠となった（裁判所文書、Canadian Lawyer Mag、National Post、Ars Technica）。 今回文書偽造が明らかになったのは、2009年に清算手続きを行ったカナダの通信会社Look Communicationsの元CEOだ。Lookは2009年に無線通信用周波数帯域など主要な資産を売却して8,000万カナダドルを得たが、取締役会の決定により1,700万カナダドルを補償金として元CEOや重役らに支払ったことから、Lookが返還を求める訴訟を提起。元CEOは約560万カナダドルをLookに支払うよう命じられた（裁判所文書[2]）。 判決後、元CEOは破産の申立を行ったが、2件の不動産は3人の
webサイトのデバイスフォントを美しく見せるために有効な設定まとめ
●自動カーニングCSS設定 本文にやると詰まりすぎるのでletter-spacingで字間を少し広げるといい。 文字詰めできるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング https://ics.media/entry/14087 ●「」などの頭を揃えるjs 「」や『』など約物が半角にできる、Yaku Han JP のご紹介 http://taneakashi.ad-mk.com/yaku-han-jp-introduction.html ●テキストの箱組みを綺麗にするcss設定 テキストの箱組みをしたい時に使えるCSS https://www.pressmantech.com/tech/coding/1551#css-text-justfy ※英語の改行でおかしくなるのでこれを効かせたら 長めの英語の文言周りをチェックする必要がある
あのフォントがWebフォントに？！有名フォントにそっくりなWebフォントを見つけたよ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ぺちこです。 何か気のきいたオープニングトークをしようと思いましたが、びっくりするほど何も思いつかなかったので割愛します。 突然ですが、「あのフォントをWebフォントとして使いたい。でも、それにはライセンスの壁が・・・。」という悩ましいとき、ありますよね。 欧文フォントに関しては数も多いので代替のWebフォントを探すかと思いますが、これがまた時間がかかる。探している間に素敵なフォントに出会うこともありますが、短縮できるものはなるべく短縮したい！ というわけで、「Google Fonts」と「Font Squirrel」から有名なフォントにそっくりなフォントを探してみました。 比較するときの基準 探したとき、主に重視した部分は以下です。画像で比較しているアルファベットだけが似ていても仕方ないので、ある程度の基準を設けています。 「a」「b」「c」「d」「o」の丸み 「a」「g」の
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
あなたは見分けられる！？定番フォント代わりに使えるGoogle Fonts 27書体 | WebNAUT by Beeworks
※この記事は2014年1月6日に執筆された記事です。現在は内容が異なる可能性があります。 あけましておめでとうございます！定番フォントを愛してやまない、デザイナーのタカハマです。今月からTypeSquareの「MORISAWA PASSPORTプラン」が始まるようで、国内サイトでもWebfontの使用が一気に増えそうですね！ そこで今回は、WebNAUTでも使用しているWebfontサービス「Google fonts」から、定番フォントの代わりに使えそうな書体をリストアップしました。 定番フォントをカタチ別にピックアップ 今回は定番フォントの偏りを防ぐために、誠文堂新光社「ABCのみほん〜かたちで見分けるフォントガイド〜」を参考に次のようなカテゴリで分類させて頂きました。 Historical Script 歴史的書体 Serif セリフ書体 Hybrid ハイブリッド書体 Sans Se
フリーフォント｜無料で商用利用可能なフォント88選、日本語・毛筆・ポップなど
今回は、商用OK＆無料の日本語フォントをたっぷり88個まとめてご紹介します。 ▼デザインおすすめ資料まとめ デザインのコツがわかる！オススメお役立ち資料5選 ferretで公開しているデザインに関する資料の中から、おすすめの資料をピックアップして紹介します。日々のマーケティング業務にお役立てください。 目次 まとめて日本語フォントを探せるサイト ポップ・可愛らしい・優しい印象のフリーフォント 高級感・繊細・伝統的な印象のフリーフォント カジュアル・スマート・シンプルな印象のフリーフォント 個性的なフリーフォント フリーフォント使用時に規約を確認しよう まとめて日本語フォントを探せるサイト たくさんの日本語フリーフォントがまとまっているWebサイトから好みのフリーフォントを探しましょう。 フロップフォント フロップフォント フリーフォントと無料素材が配布されているサイトです。日本語フォントだ
PhotoshopでFont Awesomeを利用する方法 ( PNG & SVG )
PhotoshoopでFont Awesomeのアイコンを利用する方法を紹介します。 定番のFont Awesome PSプラグインがPhotoshop CC 2015では使えなくなり、またFont Awesome公式のチートシートからコピペする方法は手間がかかって煩わしいと感じたので、PNGデータを使う方法とSVGを使う方法を探しました。どうぞ参考にしてみてください。 PNG編SVG編それ以外の方法と不採用理由参考サイト １．PNG編 WEBのデザインカンプ作りなどの場合にはこちらがおすすめです。PNGデータなら普通にサムネイル画像を一覧表示して探すことやファイル名検索もでき、Photoshopへの配置もドラッグアンドドロップでよく、とても簡単です。 Font AwesomeのアイコンをPNGファイルでダウンロードできるサイトはいくつかありますが、「一括ですべてのアイコンをダウンロードで
プログラミング用等幅フォント「Fira Code」がモダンで素敵 | 綺麗に死ぬITエンジニア
皆さんは普段、PCを使う上で、フォントは気にしますでしょうか。 最近は、Webフォントの登場によって、Webサイトごとに独自のフォントが表示されているのを見る機会も多くなりました。 しかしながら、Webや画像制作等の経験がない方は、あまりフォントをインストールする機会もないかもしれません。 そこで今回は、プログラマー向けに、普段使う開発環境等に導入したら良さそうな、オープンソースのフォント「Fira Code」を紹介したいと思います。 Fira Codeは、プログラミング用・コーディング用フォントで、リガチャー（合字）により、関係演算子（比較演算子）や論理演算子、アローファンクションなどを見やすくしてくれる等幅フォントです。様々なプログラミング言語に対応できるように設計・工夫されています。 具体的には以下のように変換してくれますが、リガチャーになっても表示幅は同じで、文字自体が変化している
日本語フリーフォント、これだけは持っておきたい厳選22個まとめ
日本中の書体デザイナーさんの努力によって、素敵な日本語フリーフォントが数多く公開されるようになったいま、複数の書体をインストールしているひとも多いでしょう。しかしデザインのとき、いつも同じ書体ばかり使ってしまう、という人もいませんか？ 公開されているフォントの数が増えたことで、どれも利用してよいか悩んでしまうこともしばしば。特に、デザインコンセプトにあった、商用利用にも対応できる素材を探すのは、時間のかかる作業のひとつかもしれません。 今回は、無料ダウンロード可能で、商用ライセンスにも対応した日本語フリーフォントという条件で、幅広いデザインに利用できる、万能アイテムのみをまとめてご紹介します。
あなたはどれにする？CSSの文字サイズ指定「px、em、%」 - デザインメモ
CSS（スタイルシート）でfont-sizeを指定するとき、pxを使わない方がいいと聞いたことがあります。 ですが、pxで指定しないとなると、今度はemと%が出てきて、どれがいいんだ？といつもよくわからないまま使っていました。 なので、どれがいいのか？そもそもこの単位たちは何なのか？復習も兼ねて調べてみました！ 目次 ・なぜ「px」で指定しない方がいいと言われているの？ ・font-sizeにおけるpx、em、%の簡単な用語説明 ※一部修正・削除（2016年12月11日） ・px、em、%の違いは、絶対？相対？ ・IEライクなfont-sizeの指定方法 ・古いIEを気にしない、スマホサイトは「rem」がおすすめ ※追記（2014年10月1日） なぜ「px」で指定しない方がいいと言われているの？ むかしむかし「IE」で文字の拡大ができない問題 ブラウザには今見ているWebサイトを拡大できる
Google Web フォント完全ガイド！使い方や 参考にしたいサンプル例まとめました。
どんなデザインにおいても、ただしいフォント選びが成功の鍵となります。見た目だけでなく、読みやすさも考えながら、フォントの組み合わせを考えるのに悩んでしまうこともしばしばです。 フォントの組み合わせについては、これまでにもいくつか（1/２/３）の記事を紹介していますが、今回は、Google Web フォントを利用した、実用的でデザインも美しいサンプル例をまとめています。 目次 Google フォントとは？ Google フォントの実装方法 実用で使える、Google フォントの組み合わせ パート１ 実用で使える、Google フォントの組み合わせ パート2 Google Web フォントを見つけやすくする Font Library Google 謹製、日本語 Web フォント「Noto Sans Japanese」 Google Font とは? 通常、ブラウザで表示できるフォントは、ユーザ
Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows）
目次 ブラウザーによってWebフォントの見え方が違う 各ブラウザーの実際の画面で見え方をチェック font-smooth -webkit-font-smoothing transform: rotate(0.001deg) text-shadow: 0 0 0.1px rgba(0,0,0,0.5) CSSを適用した状態で各ブラウザーの実際の画面でチェック このブログ内の関連ページ 参考にしたページ サンプル画面として使ったサイト この記事へのネットの反応まとめ ●ブラウザーによってWebフォントの見え方が違う 今更ですが、日本語のWebフォントを会社のサイトで使い始めました。 元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://post.simplie.jp/posts/107
Photoshop内でGoogle Fontsに公開されているフォントを選択出来るフリーのPhotoshopプラグイン・「Fontea」
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
