游ゴシックの話題の解説
「フォントの関係性はそんなのだったの！？」リアルに9割の人が気づいていない「游ゴシック」の話 https://togetter.com/li/1662198 のブクマ https://b.hatena.ne.jp/entry/s/togetter.com/li/1662198 わかりづらいとかキョトーンな人が散見されたので、蛇足とは思うけど解説をこころみる。 正直なところ説明として元ツイがいちばんシンプルだと私は思うので、この解説は元ツイが言ってることを別の言い回しで回りくどく言い換えるだけになる。つまり逆にわかりにくいかもしれない。 なお私は発端のツイートのひとではない。善意のいちハテナーである。 さらに言えば私は組版の専門家でもない。仕事で多少フォントを扱う機会がある程度の素人＋毛である。 太字には２種類あるまず、コンピューターの画面に映し出される「太字」には２種類ある。 ひとつは、最
CSSでwebフォントの読み込みが遅い問題を改善する方法 - Qiita
💀 Webフォントの問題点 Webフォントに限らず、ブラウザでテキストを表示する過程には、フォントの読み込み作業が存在します。また、フォントを読み終えるまではテキストを表示させない機能1がブラウザには組み込まれています。 ローカル環境下のフォントであれば読み込みに時間はあまりかからないので問題ありませんが、webフォントの場合はローカルフォントと比べると読み込みに多くの時間を要してしまいます。 この機能の影響で、ページのロードをしてからテキストが表示されるまでの間、ユーザーはテキストを読むことができない為、不満や苛立ちを覚え、体験価値の低下やページの離脱を引き起こすと考えられます。 ⚔️ 'font-display'プロパティでこの問題に立ち向かう font-displayというCSSプロパティを用いることで、webフォントを読み終えるまではローカルフォントを代替的にロードし、テキストの
あかつき＠おばなのDTP稼業録 【MacOS X】パスポート・LETSのフォントを整理する
だいぶご無沙汰してしまいました… その間の成果は、+DESIGNING Vol.40の巻末の方に…（宣伝） パスポートやLETSなどのサービスでフォントをインストールすると、かなり多くの書体がインストールされます。 これらを整理するために、まずはインストールされたフォントだけを一ヶ所に集めたいですよね。 というか、こんなにフォントがインストールされてる状態ではシステムへの負荷が心配（Adobe CCでもフォント選びにくいし…）。 こんなときには、Font Bookの「標準フォントを復元」コマンドを使うと、OS X標準フォント以外を「Fonts」フォルダから別のフォルダに移動させることができます。 なので、パスポートやLETSのフォントをインストールした直後にコマンドを実行すれば、インストールしたフォントをまとめられます。 コマンドを実行すると、 というアラートが表示されますので「続ける」を
細かすぎて伝わらないアンチエイリアスの話
はじめまして、デザイナーの越後です。 webフォント全盛の昨今ですが、まだまだ文字を画像化する機会も多く 画像で文字を扱うにしても、くっきりはっきり、意図した形でデザインがしたいものです。 そこで今回は「細かすぎて伝わらないアンチエイリアス」と題して、 少しマニアックなphotoshopでのフォント調整についてお話したいと思います。 おさらい：photoshopのアンチエイリアスについては、基本的には５種類 Photoshop上で文字を扱う際には、指定出来るアンチエイリアスは、 なし / シャープ / 鮮明 / 強く / 滑らかに の５種類です。 「なし」に関してはアンチエイリアスがかかっていないので、 文字のままのドットで表示されますが、 他の４つに関しては シャープ：文字が太い / くっきり 鮮明：文字が細い / くっきり 強く：文字が太い / なめらか 滑らかに：文字が細い / なめ
小さい文字が綺麗になるかもしれない方法と、コマンド「PI_CleanText」 (PIXEL LAB)
小さい文字が綺麗になるかもしれない方法と、コマンド「PI_CleanText」 ( 2012年03月22日 ) Fireworksの文字のアンチエイリアスは、 「鮮明」「強く」「滑らかに」「カスタム」の4種類がありますが、 正直、どれもあまり綺麗ではありません。 あるフォントでは、「鮮明」が綺麗だけど、別のフォントでは、「滑らかに」が きれいだったり、フォントの種類だけでなく、文字の大きさによっても、 適切なアンチエイリアスの種類は変わってきます。 このエントリーでは、アンチエイリアスのかかった小さいテキストが 少し綺麗になるかもしれない方法を紹介します。 同時に、その方法をコマンド化したので、それの解説と配布を行います。
ラフデザインをかっこよく、短時間で終わらせる方法 - ラクスルマガジン｜raksul [ラクスル]
ラクスルでは2024年6月末までの期間、チラシ・フライヤー商品で最大50%OFFとなる超大型セールを実施中です。夏の集客・販促活動の準備に向けて是非この機会にご活用ください！
![ラフデザインをかっこよく、短時間で終わらせる方法 - ラクスルマガジン｜raksul [ラクスル]](https://cdn-ak-scissors.b.st-hatena.com/image/square/de81ecf6672792c00084a663ae3a893450e76c1e/height=288;version=1;width=512/https%3A%2F%2Fraksul.com%2Fmagazine%2Fwp-content%2Fuploads%2F2020%2F12%2Flp_pos_sikucyouson.jpg)
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ
CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま
Snow Leopardで消えた「滑らかな文字のスタイル」を設定する方法 | ライフハッカー・ジャパン
Mac OS X 10.6つまりはSnow Leopardへのアップグレードでは、様々な変更点がありました。今までは「滑らかな文字のスタイル」の設定ができましたが、それがチェックを入れる／入れないという簡単な設定に変わったのも、その変更点のうちの1つです。 Snow Leopardの変更点の中でも、これは改善というより改悪と呼びたくなるようなものです。このフォントがギザギザで見難い状態を元に戻すには、ターミナルで設定をしなければなりません。 まず、アプリケーション ＞ ユーティリティ ＞ ターミナル を開きます。そして、以下のコマンドをコピーして、ターミナルにペーストし、returnキーを押します。 defaults -currentHost write -globalDomain AppleFontSmoothing -int 2 「int」の後ろの数字を「2」にすると、OS 10.5の
基本的だけど大切なタイポグラフィのシンプルな14のルール
ウェブデザインをはじめ、印刷にも役立つ基本的だけど大切なタイポグラフィのルールをfred designから紹介します。 Simple rules for good typography もしくは、Typophile 下記は、その意訳です。 はじめに ここにウェブや印刷のためのタイポグラフィに役立つ基本的なルールがあります。もちろん、このルールは基本であり、そしてルールは破られることを意図されているものです。 しかしながら、もしあなたが一般的にきちんとしていて美しくみえる何かを制作するためには良いルールです。 1. たくさんのフォントを使わない ウェブサイトなどのドキュメントに一貫性は非常に重要な要素です。一貫性は統一と一つのアイデンティティーをもたらします。 この一貫性を守るためには、一つのドキュメントに対して3つ以上の異なるフォントを使用しないことです。 2. ヒエラルキー ページ内の階
ＭＳ Ｐゴシックをヒラギノに - soundscapeout (仮)
Microsoft Office を導入すると「ＭＳゴシック／ＭＳ明朝／ＭＳ Ｐゴシック／ＭＳＰ明朝」がインストールされ、これらのフォントを使用した書類のプレビューが可能になるという利点もありますが、決して美しいフォントではないので、ウェブブラウジングの際に、これらのフォントが指定されていると、読む気が失われます（ちょっと言い過ぎか？あくまでも個人的な意見ですよ）。 解決する方法は、フォントを使用停止にすればいいのですが、ブラウジングだけのために切り替えるわけにもいきません。 昨日、hail2u.net さんのところで hail2u.net - Weblog - Firefox 3.6以降でＭＳＰゴシックを無効にする という記事が書かれていて、これなら、切り替えずに済む！というわけで、早速試してみました。 結果は、これ が、こんな感じになりました。 私の環境では、UTF-8 でも、日本語が
Firefox 3.6以降でＭＳ Ｐゴシックを無効にする
CSSの@font-faceではユーザーがインストールしていないフォントをウェブ上に用意してやりそれをダウンロードさせてページ上で利用することを主眼としているが、ローカルのフォントを置換、つまりＭＳ Ｐゴシックをメイリオに置換するなどということもできる。Firefoxでは3.6から可能になった(Beta版でももちろん可能)。ユーザー・スタイルシートでの利用が中心になると思う。 ＭＳ Ｐゴシックをメイリオに置換する場合は以下のようにuserContent.cssに記述する(userChrome.cssではない)。 @font-face { font-family: "ＭＳ Ｐゴシック"; src: local("メイリオ"), local("Meiryo"), local("ＭＳ Ｐゴシック"); } @font-face { font-family: "MS PGothic"; src:
フォントを手軽に見分ける5つくらいのコツのようなもの - .ω.
09:05かんたんなみわけかたそれが使われている場を考える他のところから推測特徴の大きいものをおぼえる雰囲気をつかむ骨格とかをなんとなく考えてみる^-^ 欧文書体はもう判別方法がほぼ確立されているみたい参考 : http://www.morisawa.co.jp/font/techo/mojigumi/08/01.htmlデザインフォントはどうしようもないので*1dafont.comあたりで^-^ 例新聞の本文には99%新聞明朝体がつかわれているAppleのサイトは基本ヒラギノ角ゴ+Myriadモダンな場では細めのゴシック体等、使われている場を考えるだけで大体判別できてしまうことが多い。 基本的に同じ製品・サービスでは同じフォント・同じフォントベンダーのものを使うことが多いので一箇所でフォントが使われていたらその製品のWebページ等でも同じものが使われていると思っていいはず具体例はそのうち
文字ツメの効果的な使用例_01 - なんでやねんDTP・新館
文字ツメをこきおろした →Booster005_HW_follow_new.pdf からでもないが、その文字ツメの効果的な使用例をひとつ紹介。 例えば下のようなメインタイトルとサブタイトルの組み合わせで、ツメ組み・キッチリ頭揃えとしたい場合。 メトリクスを使用しても、元になるプロポーショナル情報には仮想ボディとのアキが確保（残）されており、その大きさは当然文字サイズに比例するので、見た目が求められているように厳密にキッチリと揃うことはない*1。 解決法としては小さい方をインデントで少し下げ、なおかつフレーム全体を少々前へ出すしか手はないし、私の感覚ではツメが甘いという問題も残る。 こんな場合には、「和文等幅」に「文字ツメ100%」をかけて*2、 全体にトラッキングを＋60程度*3かけて字間のアキを確保。 仕上げに、手作業で食い込み部分などのカーニングを微調整して完成。 もちろん、後ろ揃えで
SiteFashion | Web制作ブログ | まずはベーシックなフォントで、フォント数は控えめに
数多くの種類が存在するフォント。しかしどんなシチュエーションでもマッチするフォントは非常に限られています。まずはベーシックなフォントを使えるようになることが必要です。 フォントで奇抜に見せるのはひとまず置いといて… 数年前の話ですが、当時サイトを作っていた友人からのメールの一部にこんなことが書いてありました。 例えばフォントを1つ選ぶにも2時間くらいかかる。 どれを使っていいかめっちゃ迷う。 これはフォントで見せよう、見せようの意識が強すぎたのだと思います。奇抜なフォントはサイトに合わせるのが大変です。それならば最初は癖のないものを選ぶ方がよいともいえます。 特に、奇抜なフォントがページのいたるところに出てくると見るのも疲れてきます。 まずは癖のないベーシックなフォントを使うようにする 数え切れないほどのフォントから1つを選ぶのは大変に見えるかもしれません。しかしその大部分は特定の状況
カーニング（文字詰め） - Webデザインテクニック
カーニングについて タイトルなどの文字を画像で作成する場合、その文字をより美しく見せるためのテクニックとしてカーニングというものがあります。 これは、フォントを用いた時にできた文字と文字の間の余白を詰めるもので、特に等幅フォントに有効です。 → カーニング前 例えば、上のフォントの場合、小さい「ェ」の間が大きく開いてしまい、少し見栄えが悪くなっています。そこで、カーニングを行います。 → カーニング後 詰める間隔は、１文字ずつの余白を確かめつつ、全体のバランスを考えて決めます。「デ」と「ザ」のように間が詰まっている時などは少し間隔を広げてみるのもいいでしょう。 カーニングの例 文字間の●は特に注意してカーニングを行って欲しいところです。 → カーニング前 → カーニング後 小さい文字にだけ注目するのではなく、細い文字同士の余白にも注意しましょう。 → カーニング前 →
フォントブログ - 素人っぽく見せないテクニック『字詰め』
いくらかっこいいフォントや高いフォントを使っても、うまく使いこなせなければ、それを使ってる意味がない（買った意味がない）！ それはブランド品を買ったのにも関わらず、うまく着こなせないのと同じ。 デザイナーとして経験の浅い私ではありますが、いくつかテクニックを紹介していきます。 まずは『字詰め』。これを調整するかどうかが素人とプロの違いなのです。 “字詰め”とは、文字と文字の空間調整のことをいいます。 通常タイトルや見出しなどのテキストを魅せる部分で字詰め処理は行なわれます。 何でもいいので、適当にフォントを使って文字を打ってみてください。 どうでしょうか。それぞれの文字の空間がバラバラではないでしょうか？ 和文書体の字詰め そもそも和文というのは正方形のスクウェアに文字が入っているため、漢字ならともかく、画数等の少ないカタカナはそのスクウェアに対してかなりの空間が存在してしまいま
illustratorでどんなフォントもスケッチフォントに変える方法 – creamu
vectipsで、クールなTipsが紹介されています。illustratorでどんなフォントもスケッチフォントに変える方法ですね。 ↑みたいなフォントが作れます。 1. テキストツールでテキストを入力 2. 塗りと線をなしにする 3. アピアランスパネルで、新規塗りを追加 黒を選択 4. 効果 > スタイライズ > 落書き で以下のように設定 5. 2ptの黒で線を追加 6. 線を選択した状態で 効果 > パスの変形 > ラフ で以下のように設定 以上ですね。 さらに、1クリックでこの効果が適用できるように、グラフィックスタイルパネルで新規グラフィックスタイル登録しておけば、1発で効果を適用できますね。 詳しくは以下からどうぞ。 » Turn Any Font Into a Sketch Font MacのDockを自動的に隠す設定にしてウィンドウが広くなりました☆表示するの好きだったんだ
使わなにゃ損！記号フォントで作るWeb素材 (1/2)
アイコンやバナーなど、Webサイトのデザインにちょっとしたイラストを使いたいけれど、絵はまったく描けない。かといって、他人に頼んで描いてもらうほどでもないし……。そんな困ったときには、記号フォントを試してみてはどうだろうか？ 記号フォントとは、通常アルファベットなどの文字が割り当てられている文字コードに、記号や絵文字を割り当ててある特殊なフォントで、Windowsの場合は「Wingdings 1」「Wingdings 2」「Wingdings 3」「Webdings」が標準で付属している。いずれも身の回りのものをモチーフにしたイラストが収録されているので、うまく使えればネット上でフリーアイコンやイラストを探すよりも手っとり早い。今回は、Illustratorでの使い方と簡単なTipsを紹介しよう（以降の操作説明は、Illustrator CS4を前提としています）。 必要なときにすぐ使うた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IEにも対応！10分でできるWebフォント実装法 (1/3)
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP