意外と奥深いCSSのfont-weightの話 - ICS MEDIA
普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまうこともあります。 この記事ではフォントウェイトのまつわる落とし穴と、それを回避するための方法を紹介します。エンジニアだけでなく、デザイナーの方にも役立つ内容です。 Noto Sans JPを例にフォントのウェイトの設定を変えながら見え方を確認できるデモページを用意しました。ぜひ試してみてください。 サンプルを別ウインドウで開く コードを確認する アンチエイリアス まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理
CSSによる微調整、フォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位などを確認しながら変更できる無料ツール -shaper
WebページのUI要素に適用したフォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位、マージン・パディングの量、カラー、ボタンの形、ボーダーのサイズ、ボーダーの角丸など、表示を確認しながらスタイルの値を調整できるオンラインツールを紹介します。 shaper shaper -GitHub shaperの特徴 shaperの使い方 shaperの特徴 shaperはWebページの各UI要素に適用したスタイルの調整を表示を見ながらできるオンラインツールです。 例えば、スペースの量を変えるだけでデザインの印象はかなり変わりますね。 スペースの量を変えてみた フォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位、マージン・パディングの量、カラー、ボタンの形、ボーダーのサイズ、ボーダーの角丸などの値を調整できます。 ライトモードとダークモードにも対応しており、上部のパネルで変更
CSSじゃなくて実際にレンダリングで使われるフォントの調べ方（ひとり DevTools Advent Calendar 2020 – 11日目） | Ginpen.com
11 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 CSS の font-family はフォント名を複数指定して、このフォントがなかったら次、みたいにすることができます。また serif のような、環境に依存する緩い指定である総称フォントファミリー (generic font family) もあります。 CSS で何のフォントが指定されているかは Elements パネルのスタイル欄に出ていますが、最終的にどのフォントが利用されているのかというのも、実はパネル内で見つけることができます。 たくさん並んでるけど結局今見えてるのどれ？ 指定したやつちゃんと利いてる？ フォールバックになってない？ みたいなときに。 利用されているフォント名を探す Elements パネル → Computed を開く 一番下 Rendered Fon
フォント管理に大活躍！好きな文字でフォントを一覧表示できる、Win, Mac, Linux対応の国産無料アプリ -fontvuer
インストール済みのフォントを好きな文字で一覧表示できる、Windows, macOS, Linux対応の国産アプリを紹介します。 国産なので日本語フォントはもちろん、英語フォントもサポートされています。 いろいろなフォントで比べてみたい人、特にフォントがたくさんの人に便利です！ fontvuer fontvuer -GitHub fontvuerの特徴 fontvuerのダウンロード・インストール fontvuerの使い方 fontvuerの特徴 既視感を抱いた人は大正解！ fontvuerは先日リリースされたばかりの国産アプリで、以前当ブログで紹介した「Fontviewer（紹介記事）」の後継の新作です。 基本的な機能はほぼ同じですが、使い勝手が大幅に強化されています！
コンテキストメニューからドラッグ中のテキストのフォント情報を調査出来るオープンソースのChrome拡張・「Fontanello」
Fontanelloは右クリックで表示されるコンテキストメニューからドラッグしているテキストのフォントの情報を調べられるChromeエクステンションです。従来のエクステンションのようにわざわざ起動したりブックマークレットを使うよりも手軽に調べる事が出来ます。 Devtoolsより楽だしブックマークレット等のように起動する必要もなく、普段の動作のみで即調べられるのは便利でいいですね。Webフォント時代なのであると重宝すると思って入れてみました。 使ってみる 当ブログで使ってみました。テキストをドラッグし、コンテキストメニューを開くとFontanelloの項目が追加されていますのでマウスを合わせればfont-family、font-weight、font-size、colorの情報が表示されます。font-familyは適応されているフォント名が表示されるようになっています。 また、各項目はク
フォント選びに迷ったら見返したい、おすすめ定番フォント31選まとめ (欧文編)｜原田 佳樹 Harada Yoshiki
こんにちは！トライブグループという会社でCDOをやっています、原田佳樹 @yoshigorouu といいます。前回はこんな記事を書きました！ 今回の記事では、デザイナーが抑えておくべき定番欧文フォント31個(+おまけ)をまとめました。世の中で使われている大体のフォントをまとめてあるので、何かデザインするときの辞書的な感じになれば嬉しいです。 1. フォントの世界に魅入ったきっかけ私のデザイナーとしてのキャリアはスタートアップ歴が長いので、スキルセットがサービスデザインに寄っています。客観的に見てもグラフィカル領域(特にサービスロゴ)が弱く、それを強化したい気持ちは前からありました。 世の中にある様々なサービスロゴを見ていくと、大体のロゴはシンボル＋タイポグラフィで構成されています。なので、フォントについて多少なりとも詳しくなれば、ロゴ制作の半分は出来るのではと思うようになりました。 リサー
プログラミング効率アップ！50＋個のコーディング用フォント試し打ち＆無料ダウンロードできる Programming Fonts
プログラミングやコーディングを行っているひとは、エディタ画面といつもにらめっこ状態というひとも少なくないでしょう。そんなときはフォント設定を見直し、開発効率を改善してみませんか。 用意された50種類を超えるコーディング向けフォントから、お好みのフォントスタイルをリアルタイムで確認でき、無料ダウンロードできるサイト Programming Fonts が公開されていたので、今回はご紹介します。 可読性の良いフォントを利用すれば、コーディング時の入力ミスを防げたり、等倍フォントなら字幅がずれる心配もありません。開発環境にあった、あなただけのプログラミング用フォントを見つけてみましょう。 数字が美しい書体選びの秘訣とは？すぐに使える Google フォント20個まとめ付 Programming Fonts の使い方 Programming Fonts は、コーディング作業に適したフリーフォントを
Fontviewer - ローカルフォントの書体をまとめてチェック
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました フォントの世界は奥深いです。フォントを変えるだけで、デザイン全体の印象が変わってきます。フォントが統一されることで全体の統一感が生まれ、雰囲気が整います。適当に気分で選んでいると、世界観もまたばらばらになってしまうでしょう。 そこで使ってみたいのがFontviewerです。ローカルにインストールされているフォントの書体をまとめてチェックできるソフトウェアです。 Fontviewerの使い方 立ち上げたところです。すべてのフォントで文字が書かれています。 表記する文字は自由に変更できます。 検索で絞り込めます。 同じOsaka RegularでもMonoと通常とで若干の違いがあるのが分かります。 Fontviewerは自分で表示するテキストが変更でき、まとめて表示できるのが便利です。
フォントの管理に！インストール済みのフォントを一覧表示できる、Win, Mac, Linux対応の無料アプリ -Fontviewer | コリス
当ブログで無料フォントや格安フォントを紹介する度に、「フォントの管理が、、、」という声がちらほら聞こえます。そんなフォントをたくさん所有されている方にぴったりのWin, Mac, Linux対応の無料アプリを紹介します。 先日リリースされたばかりの国産アプリで、もちろん日本語フォントに対応しています。 Fontviewer -GitHub Fontviewerのダウンロード Fontviewerの使い方 Fontviewerのダウンロード Fontviewerはソフトウェア開発をしているSotaro氏が開発した無料のソフトウェアで、インストール済みのフォントを好きな文字で一覧表示することができるフォントのビューアです。 MITライセンスで、個人でも商用でも無料で利用できます。
Google Fonts + 日本語を使用して、Webサイトやブログがどのように表示されるか試すことができるツール -Fonty | コリス
2018年9月にGoogle Fontsは日本語が正式にサポートされ、既に利用されている人、検討されている人も多いと思います。当ブログでも早期アクセスから使用しています。 日本語の正式サポートに伴い、Google Fontsを使用したさまざまなツールも日本語が利用できるようになりました。 自分のWebサイトやブログに、Google Fonts + 日本語を使用するとどのように表示されるか試すことができるオンラインツールを紹介します。 参考: Google Fonts + 日本語 Google Fonts + 日本語でどのように表示されるかテスト Google Fonts + 日本語の使い方 Google Fonts + 日本語でどのように表示されるかテスト Google Fonts + 日本語を使用するとどのように表示されるか試すことができるオンラインツールはこちら、Fontyです。 登録
[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」
Webフォントを使用しているサイトやブログが増えてきました。そして、近日アップデートされるChrome 60では、Webフォントの使い勝手を向上する「font-display」プロパティがいよいよ正式に実装される予定です（参考: Chromium）。 追記: さきほどChrome 60がリリースされました。 Webフォントを適用したテキストが読み込み時に一瞬表示されない現象があり、今まではJavaScriptで対応していた人、仕様だとあきらめていた人は、このfont-displayを積極的に取り入れるべきだと思います。 font-display for the Masses 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ブラウザでフォントが読み込まれる仕組み font-displayプロパティとは ほとんどの場合、swapを使
![[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」](https://cdn-ak-scissors.b.st-hatena.com/image/square/a833243d7f7fa2de140f06d3243344bf1713f818/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017072510.png)
FontBase — a Free, Beautiful, and Fast Font Manager
Font management. Perfected.All platforms. Professional features. Beautiful UI. Totally free. FontBase is the font manager of the new generation, built by designers, for designers. A set of amazing featuresFontBase is built for designers, by designers. We understand what you need and deliever a set of great features to help you find the right font.
フォント表現の可能性を広げるjQueryプラグイン 「20 jQuery Typography Plugins」
webサイトをより魅力的に演出するために利用されることの多いjQuery。プラグインの種類にもさまざまなタイプがありますが、今回紹介するのはフォント表現の可能性を広げるjQueryプラグイン 「20 jQuery Typography Plugins」です。 （Textillate.js） 独特の動きや文字組・文字列を表現できるクリエイティブなフォントのjQueryプラグインがまとめられています。 詳しくは以下 No Vacancy まるでネオンが光っているかのようなグラフィックを表現できるプラグイン。レトロな印象のデザインにおすすめ。 jQuery Super Easy Text Rotator by Pete R. | The Pete Design シンプルなフォントですが、回転やフェードイン・アウトなど、いろいろな動きを実装することができます。 Squishy 丸みを帯びた可愛らし
WhatFont Tool - The easiest way to inspect fonts in webpages « Chengyin Liu
Tweet * WhatFont is not affiliated with MyFonts and/or the WhatTheFont service. ← Back to Chengyin's main page What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that's too complicated. It should be just a click away. Hence I wrote WhatFont, with which you can easily get font information about the text you are hovering on. To embrace the new web font
Win/Mac対応、インストールされているフォントを一覧表示するAIRアプリケーション -Antialiaser
PCでもMacでも、インストールされているOpenTypeとTrueTypeのフォントをさまざまなスタイルで一覧表示するAdobe AIRのアプリケーションを紹介します。 Antialiaser [ad#ad-2] Antialiaserのインストール Antialiaserのインストールは簡単で、下記ページより「Antialiaser」をダウンロードしファイルをダブルクリックします。 Antialiaser ※Win用とMac用があります。 Adobe AIRが無い場合は同時にインストールする必要があります。 Adobe AIR あとは「Antialiaser」を起動するだけで、自動でインストールされているフォントを一覧表示します。 Antialiaserの使用方法 分かりやすいインターフェイスなので、特に説明はいらないと思いますが、簡単な使用法を紹介します。
日本語フォント252種類を表示確認できます！フォントを探すならfonthack.jp。
フォントhack.jpは日本語フォントの総合案内サイトです フォントhack.jpは、日本語フォントの魅力を皆さまお届けするフリーフォント総合案内サイトです。自由にインストールして利用できる、フリーフォントを中心に紹介しております。またフォントなニュースやフォントに関するブログなど書体に特化したコンテンツを提供しています。 フォントとは？ フォントはある様式に従って文字をデザインしてそれをパソコンなどで表示したり、印刷できるようにしたものです。パソコン内では「0」と「1」の組み合わせ(2進法)でデータ化されていますが、液晶画面などに表示するときやプリンターで印刷するときに文字となって表現されます。書体とも呼ばれていますが、これは昔あった写植のなごりで、ゴシック体(カクカクした感じの書体)とかナール(丸文字の書体)などと呼ばれていました。写植とは、写真植字といい、文字が沢山書かれた文字盤の上
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
こういうのを待ってた！日本語フォントで、レスポンシブ用の文字の指定を調整できる無料ツール -Archetype
ブラウザ上でPCにインストール済みのフォントを表示テストできるツール・typezebra