文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
こんにちは。今日も元気にPhotoshopと戯れます井畑です。 今回はPhotoshopの文字詰めに使うツールについてちゃんと調べてみました。 今では息をするように文字詰めをしていますが、デザイン初めたての時は勝手が分からず苦労しました…Photoshopの文字詰め♪ 基本的なことがほとんどなので、知ってる人にとっては当たり前のことですが、おさらいによろしければご覧ください。 それではどうぞ！ ちょっと待って文字詰めって何？ まずは文字詰めが何か分からない人の為に軽く説明しておきますね。 ワンランク上のデザインにはかかせない文字詰め 文字詰めとは読んで字のごとく、文字と文字の間を詰めてバランスをとる作業のことです。 通常文字を打っただけでは「ベタ組み」と呼ばれ、基本的に文字と文字の間が空きすぎています。それを詰めてデザインのバランスをとります。 WEBの性質上テキストデータの文字詰めは難し
優れた無料フォントはたくさんありますが、フォントによっては文字を並べた時に文字同士の間隔が不自然になってしまうことも。そんな時は文字間隔を調整するカーニングを行うことでデザインをよくすることができますが、どのようにすれば適切にカーニングができるのか、初心者でも使える9つのポイントがまとめられています。 A Beginner’s Guide to Kerning Like a Designer – Design School https://designschool.canva.com/blog/kerning/ 文字と文字の間隔は、単純に同じ距離であれば自然に見えるというわけではありません。以下の画像では左側の「Type」の文字間隔が全て等しく、右側は同じではないのですが、実際に人間の目で認識されると自然に見えるのは右側になります。これは、それぞれの文字によって持っている「空間」の大きさに
ウェブページで日本語のWebフォントを使用する時にカーニングを適用して、読みやすくて美しく表示するjQueryのプラグインを紹介します。 全角の括弧や句読点などの約物は、日本語のどんなフォントでもスクリプトのみで美しくカーニングできます。 ※文字間のカーニングは、フォントごとに設定が必要です。 jQuery.Kerning.js jQuery.Kerning.js -GitHub jQuery.Kerning.jsのデモ jQuery.Kerning.jsの使い方 jQuery.Kerning.jsのデモ デモでは上：カーニング無し、下：カーニング有りの状態で、明朝とゴシックの2書体がチェックできます。 適用されている方が、読みやすいですね。 ゴシック体のデモ、上：カーニング無し、下：カーニング有り jQuery.Kerning.jsの使い方 Step 1: 外部ファイル jquery.j
HTMLでカーニング！手軽に文字詰めできる「FLAutoKerning.js」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、机に置いたおもちゃの日焼けが気になるもりたです。 今回は、前からちょっと気になっていたウェブフォントをカーニングできるJS「HTMLで文字詰めするタイポグラフィー用JS」を試してみました。 http://fladdict.net/blog/2011/02/auto-kerning.html ※現在はアクセスできなくなっています。 ご存知のとおり、jsを使わなくてもletter-spacingを使ってcssだけで設定しようと思えばできるんですが、ひと文字ずつの設定となるとhtmlもcssもすっきりしなくなる上にめんどくさい！ こうパッとガッとスッと設定したい！ そんな希望を叶えてくれるのが「FLAutoKerning.js」です！ ポイント1：導入が楽です 手順は簡単、サイトからファイルをダウロードしてjqeryと一緒に読み込ませて<head>内に設定を書くだけ。 入れてみたデモ
CSSで句読点括弧のカーニングができるようになるぞ！ 日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能のまとめ
CSSのこの機能を待っていた人も多いと思います！ CSSで、句読点括弧のカーニングが自動でできたり、フレーズの途中で改行されないようにしたり、日本語と英語が混在したテキストでスペーシングが自動調整されたり、10px以下でも指定サイズ通りに表示されたりなど、日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能を紹介します。 Introducing four new international features in CSS by Jack J 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに word-break: auto-phrase;によるフレーズで自動改行 text-autospaceによる文字間のスペーシング text-spacing-trimによる句読
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
株式会社ZINEの仁田坂です。編集者ですがデザインするのが好きです。 自己主張しすぎな圧倒的アイキャッチで失礼しました。今日はフォントと文字詰めの話をします。ぼくは雑誌編集者として数年働いた後にWebメディアをつくり起業、みたいな感じで働いてきたんですけれども、編集もデザインけっこう似ている部分が大きいと思っています。文字で読者に伝えるのか、視覚情報でユーザに訴えかけるのか。 結局のところ同じだよなあ、と思ったりします。編集もデザインも一緒くたにして考えたほうが都合いいことが多いです。 で、けっこうWebメディア見てると残念なデザイン、多いんですよね。 Webフォントでタイトル設定してるメディアは気にならないんですけれども、アイキャッチ見ると最悪……みたいなの多い。以前GitHubでアイキャッチ用のテンプレートを公開したもんだから、形だけ真似してデザインがてんでなってないメディアが増えまし
ついにChromeで使えるようになったCSSの便利機能！ light-dark()関数、field-sizingプロパティ、句読点括弧のカーニングができるtext-spacing-trimプロパティ
今回のアップデートでは、かなり便利なCSSのプロパティが追加されました。 ライトモードとダークモードのスタイルを簡単に定義できるlight-dark()カラー関数、垂直方向の中央に配置するalign-contentプロパティ、フォームのサイズを入力された文字量に合わせて自動変更するfield-sizingプロパティ、CSSで句読点括弧のカーニングができるtext-spacing-trimプロパティ、これらがブラウザにサポートされるのを待っていた人も多いと思います。 Chrome 123 beta New in Chrome 123 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSのlight-dark()カラー関数 CSSのdisplay-modeでpicture-in-p
3連休も今日で最後ですねー。今日は ゆっくり過ごす方も多そうですね。 さて、休みですし、ちょっとネタ的 なライブラリをご紹介。カーニング をCSSで出来るようにしたJSライブラ リです。 jQueryやmootoolsなどにも依存していないようです。これだけ聞くとかなり使えそうなんですけど。でも個人的にこういうチャレンジは称えたいので敬意を示すつもりで記事にします。 CSSで出来る、と言っても独自の記述法を加える事でテキストコンテンツでのカーニングを実現するタイプなので好みが分かれそうですね。 まだちょっとよく分かってないんですけど適当にデモ作ってみました。一応違いが分かるように少し大袈裟にしたつもりです。クオリティは無視です。 ※右上でjsのオン/オフが出来ます。Chrome推奨 Sample css#example01 {/*文字詰め*/ -letter-kern: 1px 1px 0
「カーニング」「フォント当て」などデザイナーのためのテスト・クイズまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。野田です。 突然ですが、僕はとても飽き性です。なので、仕事もプライベートも楽しいこと重視で動いています。 すべてが楽しいことではないと分かっているのですが、どんなことでも楽しくなるように、常に心がけています。 精神がそんなに強い方ではない気がするので、自分の中だけでも楽観的に考えることでどうにかこうにかやってます。 さて、今回はそんな“楽しむ”を実践できそうな、デザイナーのためのテスト・クイズをまとめて紹介したいと思います。 フォントやカラーなど、知らないより知っているほうがいいと思います。 知ってるから偉いというわけではないんですが、やはり引き出しはたくさん作っておきましょう。 また、カーニングは基本的にできないとまずい気はするので、普段からトレーニングをしておきましょう。 それではご覧ください。 Webサイト編 1. Pixact http://pixact.ly/ ピクセ
文字組関連編 カーニング、字送り、文字ツメの違い
アドビは世界を変えるデジタルエクスペリエンスを提供しています。アドビのクリエイティブ、マーケティング、ドキュメントソリューションは、新進アーティストからグローバルブランドまでのあらゆるデジタルコンテンツを適切なタイミングで適切な人に提供することで最高の結果の実現を支援します。
Webでも紙でも文字のデザイン、タイポグラフィは非常に大きな存在です。 文字のデザインで基本となるカーニングについて、基礎知識から基本的なやり方、CSSでのカーニングのやり方までを紹介します。 The Ultimate Guide to Kerning 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 この画像のどこがおかしいか カーニングとは カーニングの基本的なやり方 カーニングはいつ必要なのか カーニングではないもの CSSでカーニング 終わりに この画像のどこがおかしいか この画像のどこがおかしいのか、経験の浅いデザイナーは頭をひねるかもしれません。
先日、このブログのエントリーを見て衝撃をうけたよ！ ⇒ [Webデザイン] 文字組みについて本気出して考えてみた 正確にはこのエントリーについているはてブコメントに衝撃を受けたよ！ 「これは参考になる」とか書いてあるよ！ これって基本中の基本だと思っていたよ！ 私は紙の経験はほとんど無いけど、ウェブデザインの仕事は10年以上になるので 世の中の文字詰めの甘いサイト（やポスター）のことは同じく気になっていたよ!! 東横線の中刷りの東急のポスターとかひどいよね！ あと運用していくうちにカーニングぐちゃぐちゃになってるサイトとかね！ ということで、上のエントリーに書かれていないことで、 カーニングの基本と思われることを書いてみるよ！ 音引きは横85%、小さい「ャ」は縦横85%、「・」は縦横50%＋ベースライン調整 漢字の「一」と音引きの「ー」が似ているため。 ぱっと見で音引きとわかるように横幅を
![[Webデザイン]カーニングの件もっと | chihosh blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/2a01e1629306ca9cf40722f445a3870ff46e172e/height=288;version=1;width=512/https%3A%2F%2Fpds.exblog.jp%2Fpds%2F1%2F201102%2F17%2F53%2Fa0144753_17402048.jpg)
[Å] 今まで曖昧だった「カーニング・トラッキング・文字詰め」の違いについてまとめてみました
![[Å] 今まで曖昧だった「カーニング・トラッキング・文字詰め」の違いについてまとめてみました](https://cdn-ak-scissors.b.st-hatena.com/image/square/5998bfdbaddf04e5fabbee8e405fa5409b4dbd12/height=288;version=1;width=512/http%3A%2F%2Fwebmemo.biz%2Fwp-content%2Fuploads%2Fnoimage.jpg)
ものかの @monokano 【真夜中のOpenTypeフィーチャー講座】これから「プロポーショナルメトリクス」と「自動カーニング」の連投講座をしてみるよ。 2017-02-23 01:48:40
カーニング・ゲーム
Kern Type, the kerning game カーニング（文字詰め）をテーマにしたゲーム。カーニングって日本語では地味な要素だけれど、英文では文章を美しく見せるために欠かせない要素だ。このゲームでは、そのカーニングの重要さを、インタラクティブかつゲーム的に学ぶことができる。面白い。
次の方針が望ましいと考えます。 ツメ組みでの基本は「自動」＋「プロポーショナルメトリクス」を設定 ベタ組みでの基本は「和文等幅」 自動カーニングが効かないフォントのみ、「オプティカル」を設定 見出しなど、部分的に「文字ツメ」を併用することも（ただし、欧文には設定しない） ご参考： メトリクスには「プロポーショナルメトリクス」の併用が必須 - なんでやねんDTP 2007-11-03 - 遠近法ノート 「文字ツメ」と「オプティカルカーニング」について。 Illustrator CS2とInDesign CS2の自動カーニング機能 - DTP Transit ふと、調べてみたのですが、「自動」は、従属欧文には無効なので、合成フォントを設定する必要があります（言われなくても使っているでしょうけど）。というわけではないようです。コメント欄を参照してください。 各機能をまとめてみました。 設定名 和
カーニングについて タイトルなどの文字を画像で作成する場合、その文字をより美しく見せるためのテクニックとしてカーニングというものがあります。 これは、フォントを用いた時にできた文字と文字の間の余白を詰めるもので、特に等幅フォントに有効です。 → カーニング前 例えば、上のフォントの場合、小さい「ェ」の間が大きく開いてしまい、少し見栄えが悪くなっています。そこで、カーニングを行います。 → カーニング後 詰める間隔は、１文字ずつの余白を確かめつつ、全体のバランスを考えて決めます。「デ」と「ザ」のように間が詰まっている時などは少し間隔を広げてみるのもいいでしょう。 カーニングの例 文字間の●は特に注意してカーニングを行って欲しいところです。 → カーニング前 → カーニング後 小さい文字にだけ注目するのではなく、細い文字同士の余白にも注意しましょう。 → カーニング前 →
ひらがなすべてのペア.xlsx カタカナすべてのペア.xlsx エクセルのデータです。記号など追加することもできます。 ひらがなカタカナすべてのペア・タテヨコ.zip イラストレータファイルのセットです。 ひらがなすべてのペア・タテ.ai ひらがなすべてのペア・ヨコ.ai カタカナすべてのペア・タテ.ai カタカナすべてのペア・ヨコ.ai が入っています。フォントを変更し、メトリクス設定を選べば、かな詰め（カーニング）の確認ができます。 コレはなんに使うもの？ フォント作りの終わりのほうの工程で、ひらがな・カタカナにカーニングの設定をするわけですけれども、隣り合う組み合わせの数は膨大です。 ひらがな・カタカナはそれぞれ85字以上あります（48字ではありません）から、2字の組み合わせはざっくり計算でも85×85＝7225、タテ組とヨコ組、ひらがなとカタカナがあるので7225×4＝28900*
こんにちは。 デザイナーの朝子です。 春ですね。 最近、目が痒く、鼻水とクシャミが出ます。 この世に生を受けて、ある程度長い月日が経ちました。 今まで私には無縁と思っていた、Ka-fun症に知らずに仲間入りしはじめているかもしれません。 気のせいだといいのですが…。 さて、今日はグラフィックデザインの制作において、大事な工程の一つをご紹介します。 一見、かっこよさげに見えるこのデザイン。 だがしかし…！ このデザインには、重篤な残念ポイントがあることにお気づきでしょうか？ 一般の方にはやや難しいかもしれません。 ですが、グラフィックデザイナーを目指す方には確実に気づいてほしいポイントです。 ヒントは『文字の中』にあります。 ズームしてみますね。 例えばこことか。 こことか。 どうでしょう…？ 文字と文字の間隔が不自然なことにお気づきでしょうか。 「んー、まぁ言われるとそうかな？」くらいの方
海外デザインブログCanva Design School Blogで公開された「A Beginner’s Guide to Kerning Like A Designer」より許可をもらい、日本語抄訳しています。 単語やフレーズなどの文字デザインを組むときに、なにか見た目がおかしいと思ったことありませんか。 それはきっと、カーニング（英: Kerning）の問題かもしれません。2つの文字（数字や句読点なども含む）間のすき間をカーニングと呼び、見た目のおかしいスペースを調整し、読みやすさを改善するプロセスのことを指します。 特定の文字の組み合わせでは、通常カーニング設定があまり理想的とは言えず、見た目を統一するために文字スペースを調整する必要があるでしょう。カーニング作業は、ビジュアルによる練習（英: Visual Excercise）であることを覚えておきましょう。カーニングは、均一に空け
カーニング - Wikipedia
カーニングの有無の比較。それぞれの文字の仮想ボディの境界を赤線で示す。上二つは「ベタ組み」だと間延びして見えるので、カーニングによって仮想ボディを割り込ませて隙間を減らした例。最も下は f のアセンダーと i の点が衝突した例で、鋳造活字では発生しないDTP特有の現象である。記事中で述べるように f のアセンダーと i の点を一体化させた合字にする方法も一般的だが、この例では片方だけがイタリック体であって合字はなじまないので、隙間を広げるカーニングによって衝突を回避している。 カーニング（英語: kerning）とは、主に欧文の組版において、プロポーショナルフォントの文字同士の間隔（アキ）を調整する技法のこと。カーニングを行わない場合は、文字の間に不自然な空白を招いてしまう。適切にカーニングが施されたフォントでは、字面間の空白の面積がほぼ均等になる。 DTPが普及した現在は、組版ソフト上で
Illustrator・InDesignのカーニング機能それぞれの違いについて簡単に説明した動画を作成し、YouTubeで公開した（画面は主にIllustratorを使用しているが、InDesignも考え方は共通）。*1 ※Photoshopも考え方は共通（2013.04.19追記）*2 Illustratorの画面で、各種カーニング機能の違いを説明しています。 InDesignの場合もほぼ同様に考えてイイのですが、異なる部分は随時InDesignの画面も交えて説明してあります。 ※InDesignで、オプティカルとプロポーショナルメトリクスを併用した場合、マズイ結果になるのは知っていたが、Illustratorでは特に問題ないの場合は少し挙動が異なるということは今回の作例で初めて知った。 （併用した場合の初期的な表示は「オプティカル」が優先され、「プロポーショナルメトリクス」は無視される
InDesignのカーニングをリセットにする最強ショートカット：command+option+Qキー｜DTP Transit
改めて取り上げるまでもなく、InDesignにはたくさんの文字詰めの機能があります。引き継いだドキュメントや過去に制作したドキュメントを開いて絶望するときなどに有効なのがcommand+option+Qキーのキーボードショートカットです。 これを実行すると、オプティカル／メトリクスなどのカーニングは和文等幅に、字送りは0に、また、手動で行ったカーニング（手詰め）までも0になります。 Adobe InDesign CS4 - カーニングと字送り ちなみに、Illustratorでcommand+option+Qキーを実行すると、トラッキング（InDesignでいう字送り）のみがリセットされます。オプティカル／メトリクスなどのカーニングや手詰めには影響がありません。 Illustratorにこそ、欲しいキーボードショートカットなのにな、と思ったり... 追記： OS X 10.8（Mounta
手動カーニング
ウェブでもちゃんとカーニングしたい的な話を最近よく見るようになった。フォントのカーニング情報がない！ とか、あってもブラウザーで使えない！ とか、出来るようになったかと思ったら出来なくて辛い……みたいなことを受けての魂の叫びか。それを古き良き感じにマークアップを追加して手動でやるのが結局は良さそうというA Manual Kerning Method for the Webを読んだ。 どうせやるならこの方が良いとは思うけど、後のことを考えるとマークアップ追加するのはなぁ……という感じでもある。和文ではやった方がより良いけど、作業量が膨大になりすぎるのもある。参照記事で挙げられてるkerning-pairsプロパティーみたいなのも、この値何行書けば良いの。 optimizeLegibilityには既知の問題があったりもするので、そもそもこれに頼るのはまだ危険。特に日本語のウェブページだとこの問
OpenTypeフォントの軽量化と自動カーニング 公開日：2017年02月16日 OpenTypeフォントの機能を残しつつ、サブセット化するための手順です。 目次 筆者の環境 OSX 10.11.6 ( El Capitan ) Python 2.7.10 やりたいこと 日本語フォントをWebフォントとして使うために軽量化したい CSSの font-feature-settings: 'palt'; で文字詰めしたい つかうもの FontTools 武蔵システムさんのサブセットフォントメーカーでは、カーニング情報が削除されてしまうため、こちらのツールを使います。 フォントファイル 軽量化したい OpenTypeフォントを用意します。 今回は Noto Sans Japanese を軽量化してみます。 ファイルは Noto Sans CJK JP よりも軽い、源ノ角ゴシック( Source
※当サイトは、アフィリエイト広告を掲載し、収益を得て運営しています。 PhotoshopやIllustrator、Fireworks等グラフィックソフトで文字をデザインする時、プロと一般の人とで差が出てくるのがカーニング（文字詰め）です。DTP業界出身の方には当然なこのカーニングですが、未経験の方や、最初からWeb業界に入った方には、なじみがないという場合も多いようです。ここでは、文字を美しく見せるためのカーニングに関する知識についてご紹介します。 カーニングってなに？ まずは、カーニングについてご存じない方の為に、カーニングとはどのような事なのかについてご紹介しましょう。 グラフィックスソフトで作成する文字が対象 まずこのページでの前提として、これからお話しする事はIllustratorやFireworks等のグラフィックスソフトで作成する、画像として書きだす文字が対象だという事を覚えて
前回のエントリでは触れなかった「オプティカル」について。Adobeの「文字組み設定の手引き」（http://www.adobe.com/jp/products/indesign/pdfs/mojikumi.pdf）には、次のように記されている。 この機能は現在欧文だけを想定しており、和文には対応していません。欧文の場合、自動的に文字と文字との間隔を調整します。 ということを前提とした上で、以下あえて、和文組版における「オプティカル」についてメモ。 まず、基本の確認。プロポーショナルの欧文の場合、「メトリクス」はフォントが内部的に保持しているペアカーニング情報（'kern'テーブル）に基づいて文字間を調整する。下図の「Type」の例では「Ty」の組み合わせのみが、メトリクス・カーニングの対象となる。一方「オプティカル」は、フォント内部の数値を参照するのではなく、文字の形に基づいて、InDes
こんにちは。最近「ソイレント」という飲み物が気になっているデザイナーの松田です。 今回はカーニング（文字詰め）についてお話したいと思います。 デザインの基本であり、私たちデザイナーにとってはとても大切な作業です。この工程をするとしないとではデザインに大きな差がでてきます。ただ非常に地味な作業ですので、ふだんあまり表立って話題になりません。 そこで今回はこの作業にスポットを当て、企業のWEB担当の皆さんに少しでも苦労をわかっていただく...いや、ノンデザイナーの方が社内で作業しなければならない時などの参考にしていただければと思います。作業環境はPhotoshopです。 ■目次■ 1.カーニングとは 2.文字の特徴を知りましょう。 3.photoshopでのカーニング方法 4.カーニングとトラッキングについて 5.カーニングの自動設定 6.カーニングの練習ができるサイト ■カーニングとは カー
Firefox 4で対応したOpenTypeフォントのリガチャ、カーニング、異体字などを試してみた - 強火で進め
Firefox 4で対応したOpenTypeフォントの機能を色々試してみました。 今回対応したOpenTypeフォントの機能の機能はCSSにて -moz-font-feature-settings というプロパティを設定する事で使用するしないのON/OFFを切り替えれる様です。 今回はCSSでこの様に定義し、 .liga0 { -moz-font-feature-settings: "liga=0"; } .liga1 { -moz-font-feature-settings: "liga=1"; } HTMLをこの様に記述し、「指定無し(デフォルト)の時」「無効にした時」「有効にした時」の3つの状態を比較するサンプルを作成しました。 【リガチャ】<br /> 指定無し：<span>fi</span><br /> liga=0：<span class="liga0">fi</span><b
モリサワWebフォント「TypeSquare」が文字詰めに対応！デザイナー、デベロッパー必見のカーニング機能。 - MdN Design Interactive
モリサワWebフォント「TypeSquare」が文字詰めに対応！デザイナー、デベロッパー必見のカーニング機能。 新規会員登録 ログイン管理 Twitter facebook はてなブックマーク RSS 2023.12.8 FRI
日本語って大変ですよね。 何が大変かって、「漢字」「ひらがな」「カタカナ」を組み合わせて文章を作らないといけないんですよ。 英語だったらアルファベットの大文字小文字だけで良いのに！ とまぁ、いきなり愚痴から入りましたが、今回はそんな文章の「見栄え」に関するお話です。 ブログをやる上でアイキャッチ画像を作成するのは常識ですが、アイキャッチ画像に文章を入れることで、よりブログ記事の内容を伝えやすくする手法も一般化してきました。 一般化してきたということは、差別化も難しくなってきたということでもあります。差別化が難しくなったということは「あれ、このアイキャッチ画像のパターン、あの人のブログかと思ったら違った」ということも起こりえるんですよね。 つまり自分のブログをブランド化しようとした際に、ちょっとした障害になります。 そんなわけで、他人のアイキャッチ画像と差別化するために！ 画像に入れる文章に
Illustrator CS4の［文字］パレットの［文字間のカーニングを設定］に「和文等幅」が加わっています。 Ilustrator CS4 ちょっと気になる下位互換の仕様 - ぴーぷーぶろぐ - Yahoo!ブログ Illustrator CS4のカーニング機能には、InDesignではおなじみの「和文等幅」が加わりました。これは和欧混合分で和文に対しては等幅で、欧文に対してはメトリクスカーニングで詰めるというもので、いちいち欧文だけをカーニングする必要がない非常に便利な機能なのですが、CS4でこの和文等幅で作成したテキストのあるドキュメントを、CS3互換のai形式で保存し、CS3で開き、テキスト更新をするとカーニングが「自動」に"自動的に"変わってしまう、という。。。。と、文字組みがきゅっと詰まったりして、変わります。
こんにちは！ 突然ですが皆さんWebでも文字詰めができるって知ってましたか？ WEBでの文字詰め方法を聞かれた時、 「一文字ずつ<span></span>で囲む…とかですかね…？」 と自信なさげな上に情弱さを披露してしまったデザイナーの山下と申します🙈 一般的に昔から知られている方法としてはletter-spacingやspanで文字詰めをする方法がありますが、他にもfont-kerningやfont-feature-settingsといったカーニング用のCSSプロパティが存在しています！ 特にfont-feature-settingsというプロパティではカーニング用に設定できる方法が何通りもあってめちゃくちゃすごいんです。 こういう方法もあるよー！と、デザインチームの有識者のメンバーに何通りか方法を教えてもらったので、今回はWEBサイトを読みやすくするカーニング方法を紹介していきたいと
Name Mail address (will not be published) URI Remember personal info Yes No Comment スタイル指定用の一部の HTMLタグが使用できます。 Add Your Comment Trackback+Pingback:0 TrackBack URL for this entry http://yoropan.no.coocan.jp/wp/index.php/archives/166/trackback Listed below are links to weblogs that reference 静止テキストをカーニング（文字つめ）する機能拡張 from Yoropan@Fla
何をするスクリプトか？ 選択したテキスト部分を 約物のカーニング 文字ツメ 変形（長体・平体） の順に適用して、指定ライン数以内に収めます。 同梱ファイル2Files README.txt このファイルです。とにかく最初によんでください。 shorten_line_selection.jsx スクリプト本体です。 動作環境 このスクリプトが正常に動作する環境は以下の通りです。Windows環境でも動作する可能性がありますが、動作確認はしていません。 MacOS X10.7.3 InDesign CS5_J（7.0.4） ダウンロード http://www.seuzo.jp/st/scripts_InDesignCS5/index.html#shorten_line_selection インストール スクリプト本体（shorten_line_selection.jsx）を ~/Library
編注：カーニングについての説明に誤りがあったため、内容を一部修正しました（2017年2月27日）。 Indesignで、文字と文字の間を調整することができる「カーニング」という技法をご紹介します。フォントによっては、文字と文字の間が近すぎたり遠すぎたりすることもあります。これを調整することで、より見やすいタイポグラフィを作成することができます。 カーニングとは？ カーニング（英：kerning）とは、文字同士の間隔を調整する技法のことです。主に欧文で使われていた技法なのですが、和文でも使うことがあります。フォントによって隣の文字と重なってしまったときや、逆に文字と記号の間が遠すぎるときに使われています。 Indesignでのカーニング まずIndesignを立ち上げ、新規ドキュメントを作成します。 文字を作成する ツールバー＞文字ツールを選択してください。文字ツールを長押しすると４つの項目
印刷術において、カーニングとは隣り合う文字のスペースを調整することをいいます。締め切りに追われてヘトヘトになっている時には、省略してしまいがちの処理です。 クライアントの中にはカーニングのことすら知らない人も多いでしょうが、カーニングを怠った文字のデザインを見れば、彼らは何かが変であることに直感的に気づきます。カーニングを使いこなすことで、デザインがよりプロフェッショナルなものに仕上がります。作業の最後たった数分間を費やすだけでいいのです。プロのデザイナーとしては、カーニングの技術を習慣として身に付けておきたいものです。 以下、カーニングに関する10個のヒントをご紹介します。 1. カーニングの前にリーディングとトラッキングの処理を行う — トラッキングとは、文字の集合体の中の全体的な間隔を調整することで、リーディングとは、行間の縦の間隔を調整することをいいます。まずは、このリーディングと
ヘルベチカ（Helvetica）と言えばその美しさが魅力の一つですが、ヘルベチカに似ているけど、カーニングが異常に難しいフォントを紹介します。 Hellvetica.ttfはハロウィンに合わせてリリースされたフォントで、ハロウィンの雰囲気をカーニングで表現したとのことです。 Introducing : HELLvetica. Like helvetica, but with like, much shittier kerning for Halloween. Download it at https://t.co/BXlLnOI7EG ! pic.twitter.com/qCXvEdjzYD — zacks ʙᴀᴅ ᴊᴏᴋᴇs (@zckrf) October 28, 2019 ヘルベチカと比べると、下記のようになります。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ワンランク上のデザインにはかかせないPhotoshopの文字詰め「カーニング・トラッキング」のまとめ
初心者でもデザイナーのように文字の見た目を劇的によくする「カーニング」をマスターするための9つのポイント
[JS]日本語のどんなWebフォントでも美しくカーニングできるスクリプト -jQuery.Kerning.js
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
Webで仕事をする人全員に知っておいてほしい文字詰め・カーニングの基礎知識 | 株式会社ZINE
CSSでカーニング（文字詰め）等を可能にするJSライブラリ・kerning.js
デザインの基本: フォントのカーニングとは、カーニングの基本的なやり方 | コリス
[Webデザイン]カーニングの件もっと | chihosh blog
[Å] 今まで曖昧だった「カーニング・トラッキング・文字詰め」の違いについてまとめてみました
【真夜中のOpenTypeフィーチャー講座】プロポーショナルメトリクスと自動カーニング
Illustrator/InDesignの自動カーニングあれこれ｜DTP Transit
カーニング（文字詰め） - Webデザインテクニック
フォント作成時のカーニング確認用ひらがなカタカナペア - 遠近法ノート
神経質と言われようがカーニングの大切さを語りたい | AKITA SOLUTION MAGAZINE
カーニングのプロ技を学ぶ！文字組みに必要な9つのテクニックまとめ
カーニング各種のおさらい - なんでやねんDTP・新館
OpenTypeフォントの軽量化と自動カーニング
デザイナーならこだわりたいカーニング（文字詰め）-独学!未経験からWebデザイナーになる!!
InDesignのオプティカル・カーニング - 帰ってきた💫Unicode刑事〔デカ〕リターンズ
デザインに欠かせない「カーニング」の大切さと方法にスポットをあててみた｜ブログ
文字詰め（カーニング）で他人と差がつくアイキャッチ画像を作るテクニック
Illustrator CS4の自動カーニングに「和文等幅」が付加 - DTP Transit
【HTML】WEBサイトを読みやすくするカーニング方法まとめ【CSS】｜viviON Design
Yoropan@Fla - 静止テキストをカーニング（文字つめ）する機能拡張
選択テキストを約物カーニング→文字ツメ→変形（長体・平体）で指定ライン数に追い込む「shorten_line_selection 0.5」 - 名もないテクノ手に
Indesignで文字の間を調整・カーニングをする方法
文字デザインを良く見せるための10のヒント：カーニングを使いこなす - 99designs
ナニコレ珍フォント！ヘルベチカに似ているけど、カーニングが異常に難しいフォント -Hellvetica