![活版印刷の文字のにじみを再現した「にじみフォント」、大日本印刷が開発](https://cdn-ak-scissors.b.st-hatena.com/image/square/cbc17e451d8d8903f7208802688e40280949cec5/height=288;version=1;width=512/http%3A%2F%2Finternet.watch.impress.co.jp%2Fimg%2Fiw%2Flist%2F1030%2F805%2F01.jpg)
CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日本語フォント事情をまとめました。 CSS Nite LP47 Coder's High 2016にてお話した内容です。 昔からマークアップエンジニアを悩ませてきたfont-familyによる日本語フォント指定。OSのバージョンアップとともに、新しいバンドルフォントが増え、@font-face規則も主要なブラウザでサポートされました。それに合わせてフォント指定の方法もバージョンアップしてみましょう。 Web上できれいに見える日本語フォントを使う方法としてWebフォントがありますが、実際に使うにはさまざまな障壁があります。かといってバンドルフォントはOSによってまちまち……という状況だったところに、WindowsとMac OSの両方に「游ゴシック」という日本語フォン
Mac綺麗ですよね。外観から内面まで洗練されている気がしますよね。(私はWindows派なんですが) 特にフォント面では、 OS Xでプロフェッショナルの現場でも使用されるヒラギノフォント(大日本スクリーン製造)を6書体搭載 UI用には混植用かな書体*1の「AquaKana」を使用 Mavericksでは游ゴシック・游明朝(字游工房)を2ウェイトずつ追加 最新バージョン(2016年5月現在)のOS X El Capitanでは游明朝の混植用かな書体である「游明朝体+36ポかな」(字游工房)、藤田重信氏を中心に制作された「筑紫つくしA/B丸ゴシック」(フォントワークス)、教科書体である「クレー」(フォントワークス)を追加し、更にこれまで3ウェイトだったヒラギノ角ゴシックが10ウェイトを拡張 するなど、日本語環境に対しても積極的な取り組みが見て取れます。 ただ、これはMacのお話。世界で約90
フリーフォントにもさまざまなテイストのものが存在しており、デザインによって使い分けることで、より魅力的に見せることができます。そんな中今回紹介するのは、レトロタッチのフォントが豊富に揃った「75 Free Retro Style Fonts」です。 Titania Font | dafont.com レトロな雰囲気を存分に感じられるフリーフォントが多数紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Alt Retro Typeface on Behance 多重ラインを重ねて構成された個性的なレトロフォント。デザインをグラフィカルに仕上げたい時に。 BB Free Font: Fusty Saddle – BittBox まるでスタンプを押したかのような描写が特徴のフォント。アナログ感のあるデザインに仕上げることができそうです。 Dribb
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
どうも〜こんにちはぁ! 最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね!」って感じた基本的なことを7つご紹介させていただきたいと思います。 レスポンシブデザインを制作するときに意識しておきたい基本項目7つ 1. 画像の代わりになるべくCSSで表現すべし レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。 そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。 立体ボタンや矢印だ
はじめまして、デザイナーの越後です。 webフォント全盛の昨今ですが、まだまだ文字を画像化する機会も多く 画像で文字を扱うにしても、くっきりはっきり、意図した形でデザインがしたいものです。 そこで今回は「細かすぎて伝わらないアンチエイリアス」と題して、 少しマニアックなphotoshopでのフォント調整についてお話したいと思います。 おさらい:photoshopのアンチエイリアスについては、基本的には5種類 Photoshop上で文字を扱う際には、指定出来るアンチエイリアスは、 なし / シャープ / 鮮明 / 強く / 滑らかに の5種類です。 「なし」に関してはアンチエイリアスがかかっていないので、 文字のままのドットで表示されますが、 他の4つに関しては シャープ:文字が太い / くっきり 鮮明:文字が細い / くっきり 強く:文字が太い / なめらか 滑らかに:文字が細い / なめ
画像は一切使用せず、その文字をホバーするとパタっと開くエフェクトを実装するスタイルシートを紹介します。 単に開くだけでなく、シャドウも開きに応じて変化してるのがスゴイ! 日本語、しかも漢字でもOK 実装はこんな感じになります。 HTML 文字はspan要素で配置し、上に表示されるホワイトの文字はdata-letterに記述します。 <div class="foo"> <span class="letter" data-letter="A">A</span> <span class="letter" data-letter="B">B</span> <span class="letter" data-letter="C">C</span> ... ... </div> 日本語は、こんな感じです。 <div class="foo"> <span class="letter" data-lett
最近リリースされたものを中心に、高品質なフリーのデザインフォント・タイプフェイスを紹介します。 Knubi 個人利用無料、商用利用有料。 ALEO 個人・商用利用無料。 Quant Light 個人・
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く