簡単！CSSで日本語フォントの文字間隔調整【font-feature-settings】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
グラフィックデザインやDTP、いわゆる紙媒体のエディトリアルデザイナーさんにとっては当たり前の文字間隔の調整。Webではトラッキングを「letter-spacing」で設定できますが、個別の調整ができることをご存じない方も多いのでは？ 実は、「font-feature-settings」というCSSのプロパティを設定することで、Webで簡単に文字間隔の調整（カーニング）ができます。 はじめに：ベタ組みと文字詰め 日本語フォントは基本的にベタ組み（等幅）で読みやすいように設計をされています。長文を読むにはベタ打ちのほうがリズムよく読めて疲れないので、本文などはベタ打ちのままのほうがよい場合が多くあります。 それでもフォントサイズの大きい見出しなどでバシッといい感じに決めたい場合もありますよね。個人的には記事のタイトルが並んでいるなかで、カッコから始まるものが混じっているときなどは、「んぁ〜」
お問い合わせありがとうございました。
Contactお問い合わせ お問い合わせ内容入力 入力内容の確認 送信完了 送信完了 お問い合わせありがとうございました。 ご入力いただいたメールアドレスに【お問い合わせ受付完了メール】を送信しました。 しばらく時間をおいても【お問い合わせ受付完了メール】が届かない場合は、お客様にご入力いただいたメールアドレスに誤りがある可能性が考えられます。その際はお手数ですがご確認の上、再度送信してください。 お問い合わせいただいた内容につきましては、近日中にお返事させていただきます。 トップページへ戻る
フォント図鑑、Google Fonts編 vol.4｜Naomi HIROTA / デザイナー@INITIAL
こんにちは。ユーザベースグループのFORCAS/JVRのデザイナーの廣田（@nacchin777）です。 プライベートプロジェクトとして始めた「フォント図鑑」、そのGoogle Fonts編の第4弾です。思ったよりも長く続いているので、マガジン作りました。 さて、いってみよー。 016 Philosopher ちょっと緩めのフォントを探していて、このPhilosopherと出会いました。いい感じに先端が抜けてるでしょ？ ほら、ふぅーって息をする感じ。笑 こういう配色、私、よくやるんです。パーソナルカラーが春の影響なのか、ビビッドで暖色系の配色を好んで選んじゃいます。なんか、元気が出てくる色合いでしょ？ ちょっと真面目な話。デザインにおいて、最後のワンエッセンスが、完成度をぐっと上げてくれるときがある。ラインを一本足すとか、引くとか、ほんの些細なことで、全体が大きく変わる。ほんと、この違いは
超かんたんフォント制作入門#04〜想像でフォントを作ってみよう｜フロップデザイン
フォントの人のフロップデザインです。超簡単なフォント入門の四回目。今回は想像からフォントを作ってみます。想像なので、ソフトもいりませんし、お金もかかりません。想像じゃイヤだという人もいるかもしれませんが、私たちが文字を見ている間、実はフォントを頭の中で作っています（正確には補完？）あらゆるシーンで、それが脳内で行われていて、フォント作りの基本になっているというお話です。 また今回は、フォントって何？という基本に立ち返ってみたいと思います（フォントと書体の違いみたいな言葉の定義では無く） もくじ ❶本文に使うフォント〜読みやすさとは？ ❷見出しやタイトルに使うフォント ❸気持ちを表すフォントとは ❹フワ〜ッと浮かんだ文字の絵を鉛筆で書いてみよう ❶本文に使うフォント〜読みやすさとは？ 小説や雑誌などの長文に向いているフォントで例えばパソコンにデフォルトに入っている「遊明朝体」などが代表的なフ
【Noto + YakuHanJP】日本語WEBフォント2018｜株式会社クインテット
こんにちは。 今回のテーマは「日本語WEBフォント2018」としています。 なぜこのタイトルなのかと申しますと、この記事の内容は2018年時点で、日本語WEBフォントを運用するベストプラクティスではないかと思い、WEBフォント導入を考えているみなさんの参考になればと思い執筆しました。 異論は認めます・・・ Windowsの日本語をなんとかしたい・・・Windowsの標準ブラウザフォントは、游ゴシックやメイリオになります。 しかし、Mac標準のヒラギノと見比べると、全体的に丸っこく子供っぽい印象です。 フォントの印象はそのままWEBデザインの印象に繋がるので、デザイナーとしてはフォントも制御下に置きたいところ。 そこで試していきたい「WEBフォント」。 その運用に至るまでにぶつかった壁と、その乗り越え方をご紹介します。 そもそもWEBフォントは何を使う？ファイルサイズの肥大化フォントレンダリ
秋のデザインに取り入れたい欧文フリーフォント8選【商用利用OK！】|haconiwa
秋色デザインに似あう、味のあるフォントを集めました。 こんにちは。Keinaです。 気づけば、秋空の日が増え、秋まっしぐらですね。季節の変化にあわせて服を衣替えするように、フォントも少しだけ衣替えしてみませんか？秋といえば、芸術、読書、食欲、紅葉、落ち葉、ハロウィン、収穫祭などをイメージします。秋の企画タイトルやロゴデザインに使えそうなフリーフォントを探してみました。 本日は、最近発掘した、「秋のデザインに取り入れたい欧文フリーフォント8選」をご紹介します。フリーフォントは、画像下のリンク先からダウンロードできます。すべて商用利用可能。 1. Buckwheat ※個人・商用利用可能 2. Hectra ※個人・商用利用可能 3. TRADESMITH ※個人・商用利用可能 4. Mathison ※個人・商用利用可能 5. Calvaux ※個人・商用利用可能 6. GERATIS ※個
IE11で謎のテキスト余白? 原因は游ゴシック体・游明朝体とIE11の相性だった！
2017年4月28日 IE11でテキストに起こる謎の余白の原因は？ WEBサイトのhtmlをコーディングする際、IE11だけテキストに謎の余白に遭遇する事がある。本文などのテキストでは気づきにくいが、見出しなどデザイン上、罫線や背景色などでテキストを囲った状態の場合、テキストの上下の余白がIE11だけ違う事に気づく時がある。いつも起こっているわけじゃなかったので、原因がどこにあるのかわかるのに少し時間がかかりました。 調べた結果、フォントの指定を「游ゴシック体・游明朝体」にしている時に、IE11で謎の余白が空いてしまう事がわかったので、その現象の詳細と対策法を書きたいと思います。 游ゴシック体・游明朝体はWindowsとMac両方にインストールされている貴重なフォント 游ゴシック体・游明朝体は、MacではOSX Mavericksから、WindowsではWindows8.1から標準でインス
現役デザイナーに聞く！好きなフォントとよく使うフォント！？
みなさんは普段、どのようにしてフォントを選んで使用していますか？状況に合わせてフォントを変えて使用している方も多いと思います。しかしその中でも、好きなフォントや、よく使用するフォントは人それぞれ。自分以外の人、特に活躍されているクリエイターの方々が、一体どのようなフォントを好み、使用しているのか気になりますよね。今回は特別に、現役デザイナーのみなさんに“好きなフォント”と“良く使うフォント”をお聞きしました。 編集・執筆 ／KANAKO HONDA, AYUPY GOTO 1. まずはフォントを知ろう まずはフォントについて簡単に説明します。フォントの基礎知識をつけることで、書体を選ぶ基準を見つけることができます。 和文のフォントは明朝体、ゴシック体、筆書体、手書き文字の4つに分けられます。また、欧文のフォントはセリフ体、サンセリフ体、筆記体、手書き文字の4つ分けられます。 明朝体もセリフ
【CSS】font-feature-settingsプロパティのmacOS/iOSでのバグが解消されていました【palt】 | briccolog
小ネタです。以前CSSのfont-feature-settingsプロパティについて取り上げた以下の記事↓ 文字詰めできるCSSのfont-feature-settingsプロパティについて検証してみました …の執筆時点で確認されていた、Mac OS XおよびiOSのバグが、解消されていました！ 上記キャプチャはmasOS Sierra (10.12.5)のものですが、iOS 10.3で確認しても同様でした。 font-feature-settings:palt;は、サイト全体のテキストに適用するには不適かもですが、見出し文字列などであれば、積極的に使える環境が整ってきたと言えるかもしれませんね。
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
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
「仕事メモ書き」フォントDL（遊びメモ書きフォントとの比較）
このフォントについて このフォントは「殴り書きクレヨン」に続く第二弾の手書きのフリーフォントです。 かな文字を漢字と比べ小さくデザインして文字詰めを行うことにより、なるべく本物っぽい手書きメモのイメージが出るようになりました。 文字は読める程度にかすれている箇所が多々あります。 収録文字 一般に使用する文字（ひらがな・カタカナ・アルファベット・数字・記号）は収録しています。 また漢字は常用漢字や教育漢字を含む第一水準漢字までカバーしています。 なお、それ以外の非収録文字は空欄で表示されることがあります。 おおよそ縦書きにも最低限ですが対応しています。 「仕事メモ書き」フォント（左）と「遊びメモ書き」フォント（右）の比較 同時公開した「遊びメモ書き」フォントとは姉妹関係で、かな文字（平仮名・片仮名）のみが異なっています。 この「仕事メモ書き」は「遊びメモ書き」と比べると、マジメな印象を与える
革新的な雰囲気を与えることができるサンセリフフォントまとめ「30 Free Sans Serif Fonts to Download」
TOP > Font > 革新的な雰囲気を与えることができるサンセリフフォントまとめ「30 Free Sans Serif Fonts to Download」 デザインで使用する書体の種類の選定は可読性の向上、デザイン全体の景観を大きく左右する大切なもの。フォントは数多くありますが、今回はサンセリフ体に焦点をあててまとめられた「30 Free Sans Serif Fonts to Download」をご紹介していきたいと思います。 Adam Font | dafont.com クールで洗練されたものを中心に多種多様なものがまとめられおり、気になったものをいくつかピックアップしているので下記よりご覧下さい。 詳しくは以下 Aquatico – Free Typeface on Behance 丸みを帯びたデザインに、ぐにゃりと曲がった部分があることによってより個性的な雰囲気に。収
Noto Serif CJK（源ノ明朝）の font-feature-settings:palt 対応サブセットフォントを作る - Qiita
Noto Serif CJK（源ノ明朝）の font-feature-settings:palt 対応サブセットフォントを作るfontNotoSansfonttoolsNotoSerif はじめに 2017年4月に Google と Adobe による共同開発フォント「Noto Sans CJK（源ノ明朝）」が発表されました。 さっそくサイトでも使いたいところですが、そのままでは1ウェイトあたり約23MBもあるのでユーザーにかなりの負担を強いてしまいます。そこでサブセットを作ることにしました。 ここで言う「サブセット」とは必要な文字だけを抜き出したフォントファイルのことです。 サブセットフォントメーカーは使わない 以前は武蔵システムさんの「サブセットフォントメーカー」という大変素晴らしいツールを使っていましたが、OpenTypeFontの情報をごっそり削ってしまいます。そのため CSS の
グランジで雰囲気のあるデザイン演出を Cymbriaの多種多様なフォントファミリーがまとめられた「Cymbria Free Font Family」
TOP > Font > グランジで雰囲気のあるデザイン演出を Cymbriaの多種多様なフォントファミリーがまとめられた「Cymbria Free Font Family」 デザインを支える要素の一つであるフォントデザイン。多種多様な欧文書体を持つことも大切ですが、一つのフォントで色々なタイプを持つこともデザインの微妙な調整時には必要なのではないでしょうか。今回は様々なフォントをご紹介するのではなく、焦点をCymbriaにあてたまとめ「Cymbria Free Font Family」をご紹介していきたいと思います。 癖がなく使用しやすいCymbriaはデザインする人なら持っておくと便利なフォントの一つ。太さなどのバランスが取られたセットがダウンロードできるようになっています。 詳しくは以下 フォントスタイルは6種類。丸みを帯びているかいないかだけでも印象は変わり、全体的にシンプ
デザインの腕が上がる、すごい新作フリーフォント50個まとめ 2017年6月度
見ているだけで楽しくなる、個性豊かな新作フリーフォントをまとめています。個人利用、商用利用の可否についても一緒に記載しているので、デザインの目的に合った書体をスムーズに見つけることができます。 豊富なウエイトが揃ったシンプルな万能フォントから、トレンドを意識した手書きブラシフォント、読みやすさにもこだわった筆記体など幅広いバラエティが用意されているので、今後のデザイン案件に活用してみてはいかがでしょう。 デザイナーが愛用したい！こだわりの新作フリーフォント60書体まとめ 2017年5月度 デザインの腕が上がる、すごい新作フリーフォントまとめ Wavehaus Sans Typeface 太さの異なる極細から太字まで6ウエイトが揃ったサンセリフ書体は、使い勝手のよい万能スタイル。 ※ 個人、商用利用可能 Chlakh 手書きされたレトロ系フリーフォントで、温かみのあるデザインに仕上げます。
商用可！手書きでナチュラルな無料フォント決定版（日本語・英語）
オシャレなカフェの黒板にチョークで書かれたような、ナチュラルな手書きフォントを検討中のひとにおすすめしたいコンテンツ。 ラフで少し崩したような絶妙なバランスは、利用する素材で仕上がりが大きく変わってきます。 今回は、商用利用できる手書き風フリーフォント素材をまとめてご紹介します。 日本語、英語フォントごとに分けています。 かわいいフォントや、レトロなフォント、おしゃれな筆記体フォントやブラシフォントなどと一緒に活用してみましょう。 コンテンツ目次 Adobe Fontsの手書きフォント（8個） 和文、日本語の手書きナチュラル・フリーフォント（73個） 英語の手書きプレミアムフォント（16個） 英語の手書きナチュラル・フリーフォント（72個） 現在、169個の手書きフリーフォントを集めており、アップデート継続中。 Adobe Fontsで使える手書きフォント 「日本語フォントをまとめてダウン
読めるかな？視力検査なみに小さいフォント ｜ Tips Note by TAM
レスポンシブ対応などの際、デザイン性を重視し、「ここだけは文字サイズを小さくしてエリア内に納めたい!」という要望があったとします。その場合、みなさんはどんな方法で対応しますか？ ブラウザ上でフォントを 10px以下のサイズとして表示させたい ブラウザが表示できるテキストの大きさ（font-size）には限界があります。最小サイズはブラウザの設定によっても異なりますが、例えば chrome では 10pxが一番小さいフォントサイズです。 transform:scaleを使ってみる！ CSS3 の機能で要素を拡大・縮小表示する際に使う scale。こちらを利用し、font-size:10px; に設定した文字を縮小させ、ブラウザが表示できる限界のサイズを超えていきたいと思います。 では早速。 CSSコード div{ font-size: 10px; } .font_01{ transform:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
游ゴシックのfont-family指定方法！@font-faceは絶対NG！WindowsのChromeでかすれる問題徹底検証 | WEMO
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
