タイトルや見出しで使いたいオシャレなWebフォント20選
CSSで指定するだけのウェブフォントを使用したサイトが多くなってきました。最近ではGoogle Fontsがリニューアルされ、ウェブフォントの見比べやサイズやスタイルの選択などがより容易になりましたが、それでも多くのウェブフォントからイメージどおりのフォントを探すのは依然として大変な作業です。 そこで当編集部では今回「見出しに最適」なフォントをテーマに20点ピックアップしました。 各フォントごとにコードを書いてありますが、記事末尾にはこれらをキュレーションしたGoogle Fontsのページもリンクしておきますので、是非ご利用下さい。 見出しに最適なウェブフォント Alegreya Sans SC
Typescale - Create stunning typography, generate CSS, and find inspiration.
Typescale Save CSS Go Pro Login Typescale New Board My Boards Bookmarks Likes Explore Login Go Pro Support Terms Privacy © Typescale Board Settings Responsive Body size Scale Responsive Min-width Body size Scale Body Font Weight Line-height Letter-spacing Color Background Headings Font Weight Line-height Letter-spacing Color
個人的に実践しているWebデザインガイドライン⑤ テキスト編｜TAK / Web Creator.
# 基本事項 使用するフォント・フォントサイズ・フォントカラーはあらかじめ決めておき統一感をもたせる。 文章の頭位置を揃え、他の要素とのベースラインも揃える。 文章の周囲に適度な余白をつけ文章を読みやすく。行間を揃えて適切に開ける。 日本語文章は左揃えが基本。コピーライト表記や署名などの一般慣習的な場合を除き、基本的に右揃えの文章は使用しない。 中央揃えは利用場所を考慮する。見出しなどの短いテキストに用い、長い文章ではなるべく中央揃えを使わない。 視覚に障害がある方は細身の多いフォントは読みづらい。アクセシビリティ対策として文字のウェイトには気を配る。 画像として使用するテキストは適宜アウトライン化する。 長いテキストリンクを連続して使用しない。 文章の区切りをハッキリさせる。 無意味な改行は厳禁。 # フォント フォント選びは賢く、要件やWebサイトの雰囲気に合ったものを選ぶ。 フォント
Font Awesome 5 Freeで疑似要素(:after,:before)のcontent指定する場合 - Qiita
Font Awesome 5 Freeで疑似要素(:after,:before)のcontent指定する場合CSSJavaScriptSVGFontAwesome
【2021年決定版】CSSのfont-familyオススメ設定
UX MILKUX MILKデザイナーさんがよく見るサイトの一つUX MILKです。 非常にシンプルかつ読みやすいメディアサイトで私もよく見させてもらっています。 こちらのサイトのfont-familyは下記です。 font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;メインのフォントは「ヒラギノ角ゴ Pro」と次の優先フォントは「游ゴシック」なっております。「ヒラギノ角ゴ Pro」といえばメジャーなフォントなのでよく目にしますよね。 ただmacOS Catalinaでは「ヒラギノ角ゴ Pro」がシステムフォントから外れてしまい、Macユーザーはきれいに表示されないなんてことも、しばしば
Font−familyのベストな書き方 2018年改定版 | それからデザイン スタッフブログ
CSSでフォントの種類を指定する「font−family」の正しい記述方法は、デバイスに標準搭載されているフォントやWebフォントの技術の変化などにより日々変わっています。 このブログでも「font−familyのベストな書き方 2015年版」「font−familyのベストな書き方 2017年版」として、当時のトレンドを踏まえたfont−familyの指定方法の記事をアップしました。 今回は実際に使用していて気づいた問題も出てきたので、これを機にアップデートしたいと思います。 前回紹介した「2017年版font−familiy」の問題点 2017年版font−family body { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN
★★【保存版】Font Awesomeの使い方まとめ：Webアイコンフォントを使おう
今回はFont Awesomeという超便利なサービスの使い方をまとめます。後半ではアイコンにさまざまなアニメーション効果をつける方法も解説します。 1. Font Awesomeとは？ ざっくりというとウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです。
Foundation Icon Fonts 3 | Playground from ZURB
Customize your icons to be any size, color, style in CSS Download the Font Use 283 icons with 1 font A custom collection of 283 icons that are stored in a handy web font. View All Icons » General Icons heart star plus minus x check upload download widget marker refresh home trash paperclip lock unlock calendar cloud magnifying-glass zoom-out zoom-in wrench rss share flag list-thumbnails list thumb
アイコンフォントの具体的な使い方 - ZURB University | Web Tips
公開日：2014年8月26日 アイコンフォントを利用する上で便利なサイト「ZURB University」から、フォントファイルをダウンロードしてWebページに表示するまでの具体的な手順について解説します。 ZURB University には、記事執筆時点で283種類のアイコンが登録されており、ライセンスはMIT になっています。 アイコンを使用するためのマークアップは、HTML要素にクラスを１つ付与すればいいだけですので簡単です。 【コンテンツ】 フォントファイルをダウンロードする ダウンロードしたファイルをディレクトリに配置する CSSを修正する CSSをインクルードするlinkタグを記述する アイコンを表示するためのクラスを確認する アイコンを表示するHTML要素にクラスを付与する アイコンをテキストとして文章に挿入する フォントファイルをダウンロードする 下記ページにアクセスし、
カードを重ねているかのように表示させるタイポグラフィを手軽に作ることが出来るコード | 9ineBB
こちらのコードに文字をいれるだけで、なかなかの出来のタイポグラフィが出来ます コードは、jadeとstylus を使って書かれていますが 最終的にはHTMLとCSSになりますので それを元に、利用できます。 文字が折り返してしまう場合は、 .msg のwidth と margin を調整してみてください HTML <div class="msg"> <span title="と"></span> <span title="あ"></span> <span title="る"></span> <span title="科"></span> <span title="学"></span> <span title="の"></span> <span title="超"></span> <span title="電"></span> <span title="磁"></span> <span ti
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://webfontfan.com/mincho-font/
モダン日本語フォント指定
Font Awesome Cheatsheet
フォントアイコンの使い方 (FontAwesome)