簡単！CSSで日本語フォントの文字間隔調整【font-feature-settings】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
グラフィックデザインやDTP、いわゆる紙媒体のエディトリアルデザイナーさんにとっては当たり前の文字間隔の調整。Webではトラッキングを「letter-spacing」で設定できますが、個別の調整ができることをご存じない方も多いのでは？ 実は、「font-feature-settings」というCSSのプロパティを設定することで、Webで簡単に文字間隔の調整（カーニング）ができます。 はじめに：ベタ組みと文字詰め 日本語フォントは基本的にベタ組み（等幅）で読みやすいように設計をされています。長文を読むにはベタ打ちのほうがリズムよく読めて疲れないので、本文などはベタ打ちのままのほうがよい場合が多くあります。 それでもフォントサイズの大きい見出しなどでバシッといい感じに決めたい場合もありますよね。個人的には記事のタイトルが並んでいるなかで、カッコから始まるものが混じっているときなどは、「んぁ〜」
良質なデザインを作るため揃えるべき日本語フリーフォント10種類 - ベーコンさんの世界ブログ
フォント大好きデザイナーのベーコン（@dogdog464646）です！ 良質なデザインを作るには、良いフォントが欠かせません。 それでは、「良いデザイン」ってなんでしょう？ ちょっと頭に思い浮かべてみてください 例えば… ・かわいいデザイン？ ・お客さんが使いやすいデザイン？ ・意味が伝わりやすいデザイン？ こんな感じでしょうか？ じゃあ正解の発表です 正解は… 全部です！ というかデザインの正解は、状況によって変わるんですよね なので、状況によって変わる「いいデザイン」に対応するためには「たくさんの種類のフォント」が必要になります たくさんの種類のフォントで、表現の幅を広く持つことで、デザインを正解に導きやすくなります この記事はデザイナーだけではなく ・イラストレーター ・エンジニア ・ブロガー ・プレゼン資料を作っている人 ・学校やサークルでチラシを作る人 このような人たちに役立つ、
派遣の求人情報・仕事を探すならリクナビ派遣－人材派遣の仕事情報サイト
ご利用にあたってのお願い 当サイトでは個人情報保護と利便性の観点からCookieを使用しています。 このページが表示される場合は、Cookieを使用できるようにブラウザの設定を変更していただく必要があります。 なお、Cookieは個人情報収集等の目的では使用しておりません。 リクナビ派遣は、派遣会社と人材派遣のお仕事情報を掲載するリクルートの派遣サイトです 派遣のお仕事情報は、毎日三回更新。人材派遣会社から寄せられる派遣の求人情報を掲載しています。派遣社員を希望する方は、勤務地や駅・沿線、職種、時給に加え、紹介予定派遣や第二新卒歓迎など、希望の条件で派遣のお仕事情報を探すことができます。また、派遣に関するQ&Aや人材派遣に関する各種ランキングなど、既に派遣社員として働く方だけでなく、派遣社員として初めて働く方向けの情報も掲載しています。 リクナビ派遣のトップページへ >>
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
Googleフォントの使い方: Webフォントの表示の仕組みと最適化
Googleフォントなど、Webフォントのロードはどういう仕組みなのか、どのように対応できるのか、Googleフォントの表示の最適化について紹介します。 当ブログでも日本語のGoogleフォントを導入して、1ヵ月が経ちました。 文字が読みやすくなったという利点は非常に大きいですが、ロードに時間がかかってしまうという欠点もあります。 Web fonts, boy, I don't know キャプチャ: Google Fonts + 日本語 早期アクセス 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Googleフォントのロードに何を注意すべきか Webフォントの実装に役立つリソース Googleフォントの遅延読み込み まとめ Googleフォントのロードに何を注意すべきか 私はロンドンで開催された「Polymer Summit
【日本語フリーフォント】本当は教えたくない！デザイナーが仕事で使ってる12選【商用可】 | ベーコンさんの世界ブログ
１．うずらフォント（手書きフォント系） ▼ぜんぶうずらフォントです。 手書きフリー日本語フォントはたくさんありますが、最近はこれがお気に入りです。 ゆるい感じが可愛らしい。 ちょうど下手すぎず、上手すぎずがちょうどいいんですよね！ このフォントの使いみち ダウンロードはこちらから ２．Noto Sans Japanese /a 源ノ角ゴシック（ゴシック太さ多数） GoogleとAdobeからこのフォントが発表された時、デザイナーは沸きました。 しかし思いません？ winならメイリオとかmacヒラギノとか最初から入っているフォントでいいよ！ ぼくも、そう思います！ あーでも、しかし１つだけこのフォントが便利な点があるんです。 それは 文字の太さの種類がある これが大事なんです。デザインを作る時に便利！ OSに最初に入ってるフォントは、太さの種類が２、３種類だと思います。 ボールドボタンで太く
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
2015年版！漢字が使えて無料日本語フォント５０種
無料で利用することが出来る日本語フォントを ５０種類ご紹介します。 ゴシック系、丸ゴシック系の日本語フォントから 毛筆系や明朝系など、良質な日本語フォントを まとめてみました。 基本的には、個人・商用利用OKの日本語フリーフォントを ご紹介しておりますが、フォントをご利用の際は必ずライセンスや利用規約など それぞれのフォント製作者のページでご確認下さい。 ※追記：2016/1/5 「2016年版！無料の日本語フォント８０種」も是非合わせてお読み下さい。 ※追記：2016/1/20 「2016年版！欧文フリーフォント５０種」も是非合わせてお読み下さい。 ゴシック系の日本語フォント M+ FONTS ⇒ M＋ FONTS 【個人◯ 商用◯】 直線処理と柔らかな曲線の対比が特徴的なゴシック体フォントです。 さざなみゴシック ⇒ さざなみゴシック 【個人◯ 商用◯】 「東風フォント」の代替フォント
無料で使える！和風な日本語のフリーフォント37選
目次 やわらか・繊細系の日本語フォント 12種類 力強い太文字系の日本語フォント 8種類 手書き・毛筆系の日本語フォント 6種類 レトロ系の日本語フォント 3種類 コミック系の日本語フォント 2種類 民芸風の日本語フォント 2種類 変わり種の日本語フォント 4種類 フォントを利用する際は必ず規約の確認を 商用利用の可否や条件については調査し記載していますが、商用利用のみ有料版の購入が必要だったり、配布元への連絡だったりする必要なケースもあります。ご利用の際は、必ずフォント配布元サイトで利用規約をご確認ください。 1. やわらか・繊細系の日本語フォント 12種類 落ち着いた優しいデザインにマッチする、繊細なフォントを集めました。癖が強くなく使いやすいものが多いので、重宝できます。 イマジン・ヨコハマフォント イマジン・ヨコハマフォント ひらがな・カタカナに加え、横浜市に関連する漢字が使えます
商用フリーPOPフォント10選
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
パワーポイントや同人誌などでの見栄えがグッとよくなる日本語のフリーフォント -源真・源柔ゴシック
自家製 Rounded M+の作者様がこの夏、新たにリリースされた普段使う時でも見栄えがグッとよくなる日本語のフリーフォントを3つ紹介します。 もちろん個人でも商用でも無料で、Webでも紙でも利用でき、成果物またはその派生成果物のコピーを複製したり頒布することもできます。 源真ゴシック・源柔ゴシックは先日Adobeからリリースされた「源ノ角ゴシック」をベースに、ビジネスやホビーなどでの使い勝手を重視し、細部を改善したフリーの日本語フォントです。 フォントはOpenTypeではなくTrueTypeで用意されているので、パワーポイントのスライドなどにもフォントの埋め込みができるようになっています。 パワーポイントのスライドにフォントを使用 プロポーショナルフォント（等幅フォントも）が用意されているので、そのまま文字を入力するだけで、間延びせずいい感じに詰められて表示されます。 「フリーフォント
フリーフォント22選【日本語対応／商用可／無料】
最初から入っている標準フォントだけでは、ブログの画像にキャプションを入れたいとき、WEBサイトのメリハリを付けたいとき、ロゴを作りたいときなど、かっこがつかない！そんなふうに思うことありますよね。 しかしフリーフォントって、あまりに種類がたくさんありすぎて、どれを使っていいのやら困ってしまいがち。欧文フォントは種類も豊富だけれど、日本語対応(漢字も対応)フォントを探し出すのはひと苦労。 そこで！今回は使うだけでサイトや印刷物がかっこよく仕上がる、そんな日本語フリーフォントをご紹介いたします。 誰でも自由に無料ダウンロード！商用利用も可日本語対応上記を満たすフォントの中でも、特にクオリティが高く、様々なシーンで使用できそうなフォントを中心に集めました。（参考：サイト改善 10のポイント） 誰でも上手いキャッチコピーが作れる！ノウハウ記事17選とテクニック集 1. スタイリッシュにまとめたい
文字の上にカーソルを置くだけでフォント名が分かるChromeの拡張機能「WhatFont」
ウェブサイトはレイアウトや文字の選択で雰囲気がガラっと変わるため、人目を引くウェブサイトが使っているフォント名・文字サイズ・文字の色などは気になるところです。文字の上にカーソルを置いたりクリックしたりするだけでフォントの種類や詳細が分かるGoogle Chrome拡張機能が「WhatFont」で、気になるウェブサイトのデザインの秘密が簡単に分かるようになっています。 WhatFont Tool - The easiest way to inspect fonts in webpages « Chengyin Liu http://chengyinliu.com/whatfont.html Chrome ウェブストア - WhatFont https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpml
細かすぎて伝わらないアンチエイリアスの話
はじめまして、デザイナーの越後です。 webフォント全盛の昨今ですが、まだまだ文字を画像化する機会も多く 画像で文字を扱うにしても、くっきりはっきり、意図した形でデザインがしたいものです。 そこで今回は「細かすぎて伝わらないアンチエイリアス」と題して、 少しマニアックなphotoshopでのフォント調整についてお話したいと思います。 おさらい：photoshopのアンチエイリアスについては、基本的には５種類 Photoshop上で文字を扱う際には、指定出来るアンチエイリアスは、 なし / シャープ / 鮮明 / 強く / 滑らかに の５種類です。 「なし」に関してはアンチエイリアスがかかっていないので、 文字のままのドットで表示されますが、 他の４つに関しては シャープ：文字が太い / くっきり 鮮明：文字が細い / くっきり 強く：文字が太い / なめらか 滑らかに：文字が細い / なめ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用利用無料！女子高生が書くような文字をイメージしたかわいい日本語のフリーフォント -JKゴシック
商用利用無料！ 繊細で透明感のある美しいフリーの日本語フォント -超極細ゴシック体
細めで角丸な明朝体の日本語フリーフォント「こころ明朝」商用利用無料｜男子ハック
商用利用無料！ごつごつした感じがいい味をだしてる日本語の極太フリーフォント -鉄瓶ゴシック
ウェブでも同人誌でも動画でも商用利用可！女子向けのしとやかでカワイイ日本語のフリーフォント -ロゴたいぷゴシック-コンデンスド | コリス
漢字も使えて見出しやキャッチコピーにいい感じ、やさしいデザインのフリーフォント -ロゴたいぷゴシック