もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
現役デザイナーが教える！完璧な書体を決める10個の黄金ルールまとめ
これまでに書体の使い方が特に優れたプロジェクトを目にしたことはないでしょうか。デザイナーによっては、あらゆるプロジェクトで完璧な書体をデザインできる、特殊なスキルを持っています。 いくつかのシンプルなルールを適用することで、誰でも実現できるテクニックとも言え、どんなプロジェクの書体の見た目とデザインを、デジタルと印刷の両方で改善することができます。 もし、あなたが書体選びやフォントの組み合わせに困っているのであれば、今回紹介するルールを守ることで、いつでも優れたデザインを作成することができます。 コンテンツ目次 1. プロジェクトの目標を決めよう。 2. 同じような形、シェイプを探そう。 3. サイズのために書体スケールを設定しよう。 4. 余白スペースにも気を配ろう。 5. 左揃えにしよう。 6. 2つの書体を選ぼう。 7. フォントのデザインは変更してはいけません。 8. たくさんのコ
いまいちど日本語の標準的なサンセリフ系 Web タイポグラフィを考える - ONO TAKEHIKO - Medium
Web フォントが浸透してきて、Web デザインのタイポグラフィーにおける自由度は飛躍的に向上してきた感があります。いやほんとに。 ひとむかし前なんてデザイン上どうしても指定したいフォントがあった場合には、 Photoshop や Fireworks でテキスト部分にスライスを切って画像として書き出したりしてましたからね。しかもデバイスの画面が高解像度化するのに伴ってやれ 2倍・3倍・4倍... って用意しなければならない弾数も増えるにつれて、もう作るのもその後の修正などの運用作業も血みどろな状態だったと思います。それでもやりましたけど。 その点いいですよね Web フォントは。細かなカーニングや欧文と日本語テキストとの大きさのバランスなど、微調整の面でまだ CSS の実装が追いついていない部分はあるので完璧じゃあない。けれど実装や運用のコストを考えたら時間的にも費用的にもメリットが多いの
読みやすいフォントの CSS 設定例 | murashun.jp
［ ＋ expand ］美しいフォントとはフォントの種類ゴシック体 vs 明朝体Web フォント総称ファミリーfont-family の設定例フォントのサイズフォントの色フォントの文字間隔フォントの行間まとめ関連記事美しいフォントとは 昔から Windows のユーザでしたが、初めて Mac のフォントを見たときの衝撃は今でも忘れられません。Windows と比べて Mac のフォントの美しさは際立っていました。その美しいフォントは "ヒラギノ" と呼ばれ、Mac の中心的なフォントのひとつで、これ以上に美しい日本語のフォントは見たことがありません。 Windows と Mac ではフォントのレンダリング方法が異なるため、今日に至っても Windows のフォントが美しくない問題は解決されていません。しかし、Windows は Vista 以降から "メイリオ" と呼ばれるフォントが収録さ
★★【保存版】Font Awesomeの使い方まとめ：Webアイコンフォントを使おう
今回はFont Awesomeという超便利なサービスの使い方をまとめます。後半ではアイコンにさまざまなアニメーション効果をつける方法も解説します。 1. Font Awesomeとは？ ざっくりというとウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです。
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
游ゴシックは何故Windowsでかすれて見えるのか - Ryusei’s Notes (a.k.a. M59のブログ)
この記事は2016年当時の状況を書いています。その後のバージョンアップで、Windowsでのフォントレンダリングは改善され、ガンマ補正周りのエラーはなくなっているようです。当時の状況を資料として残しておきますが、記事を参照する場合はご注意ください。 TL;DR 游ゴシック体は単に細いから薄いのではなく、ガンマ補正が2重、3重に掛かっているために、グレーが本来よりも明るくなりすぎている。ガンマ補正を逆に掛けると、正常な表示になる。 かすれた游ゴシック Windowsでは游ゴシックがかすれて見える。細字だと薄くて読みづらいから、より太いウェイトを指定しろという話もある。（Windowsで游ゴシックが汚いのは、結局誰が悪いのか？ | Cherry Pie Webなど）だが、かすれて見える原因は、ウェイトが細すぎるからではない。 例えば、本文に游ゴシックを使っているWIREDの記事（「癌」という名
デバイスフォント・WEBフォント大解剖 〜新人デザイナーのテキストフォント選び〜 | WebNAUT by Beeworks
先輩「このテキスト、デバイスでやってね」 新人「え？デバイスってなんですか？」 こんなやりとり、経験ありませんか？ 今回は新人にありがちな、「デバイスフォントとWEBフォントって何？」「WEB上のテキストで使えるフォントってどんな種類があるの？」という疑問にお応えします。 目次 HTMLテキスト・画像テキストとは？ HTMLテキストで使えるフォント４分類！ 1.パソコンやスマホのOSに元々入っているフォント（＝OS標準フォント） 2.ユーザーが個別にパソコンにインストールしたフォント 3.外部のWEBフォントサービスが提供するフォント 4.自分でサーバーにアップしWEBフォント化したフォント 番外：OS標準フォントでいいんだけど結局何を使えばいいの？ HTMLテキスト・画像テキストとは？ WEB上で表示されるテキストは、大きく「HTMLテキスト」と「画像テキスト」の２つに分けられます。 「
[webデザイン]独学デザイナーでも自信を持ってフォントを選ぶための6つのアドバイス
書体デザイナーと話し、長年の疑問を全て解消してきました 先日、[クリエイター]英Monotype社の書体デザイナー大曲都市さんに会いにいってきましたという記事を書きました。このときはたまたま英Monotype社の書体デザイナーの大曲都市さん(@Tosche_J)としっかりと話をする機会を得たわけですが、そこで私がフォントについて「こうだと思っているけど実際どうなのか」という質問をたくさんぶつけてきました。 私としてはすごく納得がいき、フォントというモノに対する認識がはっきりしました。なので今回はその都市さんから聞いた話を踏まえた上で私の現時点でのフォントについての考え方の着地を6つのアドバイスとして書いてみます。 特に独学でデザインの勉強をしてきた人は「こういうものだと思うんだけど、皆は実際どう考えているんだろう」という悩みを抱えているはずだと思うので、それに対する答えを出したいと思います
![[webデザイン]独学デザイナーでも自信を持ってフォントを選ぶための6つのアドバイス](https://cdn-ak-scissors.b.st-hatena.com/image/square/b0e8c9c98b8c210bbed0a0d39aed243119c1eba7/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F05%2Ffont-six-stance-11-150x150.png)
フォントを一覧表示できるWebサービス3選！デザインの参考に | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今回は、ロゴや画像制作などのアイデア出しに気軽につかえるフォントビュワーを3つご紹介します。どのサイトも自分のPCに入っているフォントを一覧で表示してくれるWebサービスです。 独学でつまずいていませんか？ Webデザインの基礎を効率的に学びたい、現役デザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） ※この記事は2022年3月に編集部が情報を更新しました フォントを一覧表示してくれるサービス Wordmark Wordmark まずご紹介したいサイトがこちら。私が1番お世話になっているところです。 シンプルで使いやすい！ さらに表示も綺
タイポグラフィが苦手な人におすすめしたい私のやり方
東京都でフリーランスデザイナーをしているイシジマミキのブログです。制作実績やその作り方とか。あと運営しているコワーキングスペース「こけむさズ」に関して。書評などのレビューもします。 ※タイトルを「文字のビジュアルデザインをするのには優先順位から」→「タイポグラフィが苦手な人におすすめしたい私のやり方」に変更しました。タイトルを考えてくださったhttp://handywebdesign.net/のなかふじさん、ありがとうございますー！ タイポグラフィーとかロゴデザインとかそれ以外にも文字をデザインする機会は多いと思います。というかDTPですとこっちのが日常的に行われますね。Webデザインでも最近Webフォントなどが出てきたことでよりフォントがいろいろ使えるようになり表現力が上がりました。Web系の人にはあまり使われない内容かもしれませんが、覚えておくと良いよー。ということで普段自分のやってい
有名なフォント12種類の紹介とフォントの基礎知識について - YATのBLOG
2013年 01月 09日 今さら聞けない？有名なフォント12種類の紹介とフォントの基礎知識について カテゴリ： Font タグ：Font 新年明けましておめでとうございます。今年も色々と挑戦する年にしたいのですが、一先ずブログをしっかり書くというのをベースにがんばります。 早いもので、このブログも気がついたら3年が過ぎ4年目に突入していました。立ちあげ当初は辞めないことを目標にしていましたが、続けることが大事だなと今でも思っています。皆様本年もよろしくお願いします。 今回は自分がよく使っているフォントをまとめました。他にも使っているフォントはもちろんあるんですが、基本的なフォントやWebベースで使えるフォントあたりを紹介しています。 1.フォントリスト 2.フォントの基本 3.考察 フォントリスト 欧文フォント 1.Arial 2.GEORGIA 3.Myriad 4.Verdana 5
[CSS]俺好みのfont-family指定が最強に読みやすくてオススメ！
俺のためにWeb開発者は俺にとって読みやすいフォント指定をするのだ！ 指定方法は下にあるぞ！ 新規でサイトを制作するのに基本のフォント指定を持っていなかったので 色々調べたり、このブログのフォント指定を変更してみたりしたら 実は Arial より Verdana のほうが見やすいことがわかってしまった。 さすがMicrosoftがコンピュータ用ディスプレイ上での視認性向上のために 作ったフォントだ！Verdana - Wikipedia フォント周りのオススメの指定追記記事により良い指定を載せたのでこちらは掲載終了しました。 font-family めっちゃ長い！何故かと言えば環境によっては指定したフォントがインストールされていない可能性があるから。 だから指定したいフォントを優先順位つけて記述する。左にあるフォントが一番優先順位が高い。 余談だけどfont-size(文字サイズ)とlin
やさしさゴシックの魅力｜可愛くて温かい商用可フリーフォント #LOVEFONT Advent Calendar 2012
今回、WEBCRE8.jpの優さん企画の#LOVEFONT Advent Calendar 2012というイベントにお誘いいただきました。 愛するフォントの魅力を語る・詳しくなくても構わない、と優しい声をかけていただいて勇気がでたので、私も参加させていただくことになりました。 今回の企画、Advent Calendarと#LOVEFONTについては、WEBCRE8.jpさんの記事をご覧ください。 2012年、今年こそはAdvent Calendarに参加しよう！！ ｜WEBCRE8.jp#LOVEFONT ｜ WEBCRE8.jp#LOVEFONT Advent Calendar やさしさゴシックって…？その名の通り、やさしい雰囲気の「やさしさゴシック」。 好きなポイントはいろいろあるのに、そのフォントについて知っていることは、とても少なかったので調べてみることにしました。 やさしさゴシッ
メイリオとMeiryo UI って全然違うからね？ / Maka-Veli .com
意外に知らないんだなーと思って。 Meiryo UI はWindows7から登場したメイリオフォントの改良（もしくは派生）版です。 メイリオはVistaからですね。 このブログはヒラギノの次にMeiryo UI 、次にメイリオ指定です。 どちらが良いのかは個人差分かれると思います。 大きな違いはカナと文字詰め。 Meiryo UI のカナは半角と全角の中間？というくらい Narrow な感じ。 文字間も詰められていて、これを使うと、かなり全体的に詰まった印象です。 メイリオは一応プロポーショナルフォントらしいですが、和文が等幅なので感じられず。 カナが入ると、かなり横幅が変わってきます。 このようにまとまった文章で見比べると、テキストのボリューム感もだいぶ違いがわかります。 ブラウザでの見え方はこんな感じ しまった・・・英字はArialで表示されてます。 同様の事
フォント選びを楽にする4つの方法 | ナナメウエBlog
デザインをしていて、フォントに悩むことってよくありますよね。 私はロゴとかになると自分のMacに入っているフォントを全部検証したりすることもありますが、これがけっこう大変。 今回は私がやっているフォント検証の方法をご紹介します。 ただ最終的には目視での確認→決定になりますので、それを少しでも効率化したり、違うフォントの可能性に触れてみる方法についてです。 Font Bookで任意の文字を入力する方法 Macに標準搭載されている「Font Book」というアプリがあります。 フォントをインストールする際に、直接ライブラリに入れる方法もありますが、ダブルクリックするとこのFont Bookが起動します。 アプリケーションフォルダにありますので、Dockに入れておくとすぐに起動できて便利だったりします。 で、このFont Bookがなんで便利なの？って話。 通常はFont Bookを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
フォントでコミュニケーションする方法 その4 「Webデザイナーが心がけている、タイポグラフィのあれこれ」
ガーリーデザインなんかに良く合うカリグラフィーやスクリプトのフリーフォント ｜https://wp.yat-net.com/name
Basic Design Note
