ついにChromeで使えるようになったCSSの便利機能！ light-dark()関数、field-sizingプロパティ、句読点括弧のカーニングができるtext-spacing-trimプロパティ

2024/03/26 92 users プロパティ 垂直方向 ダークモード light-dark 中央

今回のアップデートでは、かなり便利なCSSのプロパティが追加されました。 ライトモードとダークモードのスタイルを簡単に定義できるlight-dark()カラー関数、垂直方向の中央に配置するalign-contentプロパティ、フォームのサイズを入力された文字量に合わせて自動変更するfield-sizingプロパティ、CSSで句読点括弧のカ... 続きを読む

CSSで句読点括弧のカーニングができるようになるぞ！ 日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能のまとめ

2023/12/13 180 users スペーシング CSS 近日 フレーズ 途中

CSSのこの機能を待っていた人も多いと思います！ CSSで、句読点括弧のカーニングが自動でできたり、フレーズの途中で改行されないようにしたり、日本語と英語が混在したテキストでスペーシングが自動調整されたり、10px以下でも指定サイズ通りに表示されたりなど、日本語が読みやすくなる最近サポートされた・近日サポー... 続きを読む

初心者でもデザイナーのように文字の見た目を劇的によくする「カーニング」をマスターするための9つのポイント - GIGAZINE

2016/02/05 432 users GIGAZINE フォント 間隔 デザイナー 文字間隔

優れた無料フォントはたくさんありますが、フォントによっては文字を並べた時に文字同士の間隔が不自然になってしまうことも。そんな時は文字間隔を調整する カーニング を行うことでデザインをよくすることができますが、どのようにすれば適切にカーニングができるのか、初心者でも使える9つのポイントがまとめられています。 A Beginner’s Guide to Kerning Like a Designer ... 続きを読む

ノンデザイナー必見！ 絶対に見ておきたいデザインスキルアップできる記事12選 - ICS MEDIA

2015/11/19 431 users ICS MEDIA デザイン 記事12選 フロントエンド 弊社

弊社のスタッフはフロントエンドの開発にとどまらず、デザインを制作する機会も少なくありません。弊社に限らず、近年職種を問わずデザインを扱う機会が増えているように思います。しかし、コンテンツ要素が整理整列されていなかったりテキストのカーニングがされていなかったりと、基礎的なことができていないようなケースも多く見られます。基礎的な部分が押さえられていないと、野暮ったさや素人感が出てしまいイマイチな仕上が... 続きを読む

ノンデザイナー向け！グラフィックデザインの基本用語、50個まとめました。 - PhotoshopVIP

2015/10/14 122 users PhotoshopVIP ノンデザイナー向け 寒色 CMYK

海外デザインブログCanva Design School Blogで公開された「A Beginner’s Guide to Kerning Like A Designer」より許可をもらい、日本語抄訳しています。 グラフィックデザインの世界に飛び込もうとしたときに、新しい言語を学んでいるような気分になるときがあります。 カーニングやトラッキング、暖色、寒色、CMYK、RGBと覚えなければいけない用... 続きを読む

カーニングのプロ技を学ぶ！文字組みに必要な9つのテクニックまとめ - PhotoshopVIP

2015/09/25 304 users フレーズ 単語 日本語抄 数字 見た目

海外デザインブログCanva Design School Blogで公開された「A Beginner’s Guide to Kerning Like A Designer」より許可をもらい、日本語抄訳しています。 単語やフレーズなどの文字デザインを組むときに、なにか見た目がおかしいと思ったことありませんか。 それはきっと、カーニング（英: Kerning）の問題かもしれません。2つの文字（数字や句... 続きを読む

ノンデザイナー必見！ 絶対に見ておきたいデザインスキルアップできる記事12選 – ICS LAB

2015/08/18 431 users ICS LAB デザイン 記事12選 フロントエンド テキスト

どうも、ICS加賀です。 弊社のスタッフはフロントエンドの開発にとどまらず、デザインを制作する機会も少なくありません。弊社に限らず、近年職種を問わずデザインを扱う機会が増えているように思います。しかし、コンテンツ要素が整理整列されていなかったりテキストのカーニングがされていなかったりと、基礎的なことができていないようなケースも多く見られます。基礎的な部分が押さえられていないと、野暮ったさや素人感が... 続きを読む

デザインは基本が大切！ひとつ一つをしっかり見直しておきたい20のデザインテクニック | コリス

2015/06/15 628 users コリス デザインテクニック エフェクト デザイン フォント

文字の扱い方、レイアウト、カラー、エフェクトなど、プロのデザイナーがこだわっているデザインの基本となるルールと、ついやってしまう間違いとその解決方法まで、ワンランク上のデザイナーになるためにひとつ一つをしっかり見直したい20のデザインテクニックを紹介します。 カーニングとはフォントの文字間のスペースを調整することです。カーニングの最終目的は、それぞれの文字の間が不自然な空白にならないように字面間の... 続きを読む

デザイナーのためのテスト・クイズまとめ「フォント当て」「カーニング」など | 株式会社LIG

2014/12/10 85 users テスト 精神 飽き性 野田 すべて

こんにちは。野田です。 突然ですが、僕はとても飽き性です。なので、仕事もプライベートも楽しいこと重視で動いています。 すべてが楽しいことではないと分かっているのですが、どんなことでも楽しくなるように、常に心がけています。 精神がそんなに強い方ではない気がするので、自分の中だけでも楽観的に考えることでどうにかこうにかやってます。 さて、今回はそんな“楽しむ”を実践できそうな、デザイナーのためのテスト... 続きを読む

[JS]日本語のどんなWebフォントでも美しくカーニングできるスクリプト -jQuery.Kerning.js | コリス

2014/03/06 341 users コリス スクリプト Webフォント jQuery 句読点

ウェブページで日本語のWebフォントを使用する時にカーニングを適用して、読みやすくて美しく表示するjQueryのプラグインを紹介します。 全角の括弧や句読点などの約物は、日本語のどんなフォントでもスクリプトのみで美しくカーニングできます。 ※文字間のカーニングは、フォントごとに設定が必要です。 jQuery.Kerning.js jQuery.Kerning.js -GitHub jQuery.K... 続きを読む

デザインが死ぬほどはかどるIllustratorショートカットキー15個 | Find Job ! Startup

2013/09/10 104 users Startup Find Job Shift デザイン

IllustratorにはPhotoshopには無い、便利なショートカットがたくさんあります。 今回は、デザインをするのに知らないと絶対損するIllustratorショートカットキーをまとめます。 文字入力に関するショートカット Opt＋←　文字間隔を詰める（カーニング） Opt＋→　文字間隔を空ける（カーニング） ⌘＋Shift＋＞　文字サイズを大きくする ⌘＋Shift＋＜　文字サイズを小さく... 続きを読む

ワンランク上のデザインにはかかせないPhotoshopの文字詰め「カーニング・トラッキング」についてのまとめ | クリエイティブメモメモ

2013/04/18 534 users Photoshop クリエイティブメモメモ 文字詰め まとめ

ワンランク上のデザインにはかかせないPhotoshopの文字詰めについてのまとめ記事です。デザイナー目線で特に「カーニング」「トラッキング」の使い方について説明しています。こんにちは。今日も元気にPhtoshopと戯れます井畑です。 今回はPhotoshopの文字詰めに使うツールについてちゃんと調べてみました。 今では息をするように文字詰めをしていますが、デザイン初めたての時は勝手が分からず苦労し... 続きを読む

HTMLでカーニング！手軽に文字詰めできる「FLAutoKerning.js」 | デザイナーブログ | 株式会社LIG

2012/10/29 276 users letter-spacing CSS ウェブフォント 日焼け

こんにちは、机に置いたおもちゃの日焼けが気になるもりたです。 今回は、前からちょっと気になっていたウェブフォントをカーニングできるJS「HTMLで文字詰めするタイポグラフィー用JS」を試してみました。 http://fladdict.net/blog/2011/02/auto-kerning.html ご存知のとおり、jsを使わなくてもletter-spacingを使ってcssだけで設定しようと思... 続きを読む

CSSでカーニング（文字詰め）等を可能にするJSライブラリ・kerning.js - かちびと.net

2011/09/20 90 users jQuery mootools 敬意 CSS ライブラリ

3連休も今日で最後ですねー。今日は ゆっくり過ごす方も多そうですね。 さて、休みですし、ちょっとネタ的 なライブラリをご紹介。カーニング をCSSで出来るようにしたJSライブラ リです。 jQueryやmootoolsなどにも依存していないようです。これだけ聞くとかなり使えそうなんですけど。でも個人的にこういうチャレンジは称えたいので敬意を示すつもりで記事にします。 kerning.js CSSで... 続きを読む

Photoshop VIP ☞ iPhone表示にも対応、レスポンシブデザインの無料WordPressテーマ15選(プラグイン付)

2011/09/08 218 users レスポンシブデザイン Photoshop Vip 併用 編集

レスポンシブデザインに関するjQueryプラグインなど レスポンシブWebサイトを作成するときに便利なツールなどをまとめています、ご参考までに。 FitText ウィンドウ幅に応じてフォントサイズを変更してくれるプラグイン、Webフォントを利用するときに便利。 無料ダウンロード Lettering.js タイポグラフィーのカーニングや編集なども可能にするプラグイン、こちらもWebフォントとの併用を... 続きを読む

Illustratorでの箇条書きの作り方 - DTP Transit

2011/07/18 66 users 箇条書き Illustrator DTP Transit

Illustratorで箇条書きを組むとき、得てして次のようになっていることがありますが、次の点で好ましくありません。 箇条書きの行頭記号には「・」（中黒）ではなく「•」（ブレット）を使う（「●」（黒丸）でもない） Illustratorには段落内改行がない。行頭記号がない行頭のソロエは、スペースではムリだし、カーニングで調整するのは現実的ではない これを修正したのが次の例です。 これを実現するに... 続きを読む

I Love Typesetting: InDesignによる欧文組版の基本操作その4

2011/06/09 23 users InDesign 欧文組版 メトリクス グリッド 基本操作

2011/06/09 InDesignによる欧文組版の基本操作その4 前回までの基本的な事項をまとめます。 1.（段落パネル）コンポーザ＝欧文コンポーザ 　　2.（文字パネル）文字揃え＝欧文ベースライン　　3.（段落パネル）行送りの基準位置＝欧文ベースライン　　4.（段落パネル）グリッド揃え＝なし 　　5.（文字パネル）カーニング＝メトリクス 今回は、InDesignでの「英文引用符」についての機... 続きを読む

文字デザイン「タイポグラフィ」の魅力 | うましかニュース

2011/05/24 55 users タイポグラフィ スペーシング レディング 字体 活字

名前：admin 投稿日：2011/05/24 19:00:00.00 ID:AdMiN1d2A0a9!!今回も過去スレからなど色々と。 タイポグラフィ…いいですよね。 タイポグラフィ 印刷物の読みやすさである可読性や、視認性、そしてその美しさを得るために、活字の配置・構成やその属性すなわち書体、字体の大きさ（ウェイト）、行と行との間隔（レディング）、文字と文字との間隔（カーニング及びスペーシング... 続きを読む