[B! font] hashrockのブックマーク

商用でも無料で使える2種類の日本語フォント「刻明朝」「刻ゴシック」

漢字に比べて平仮名・カタカナを幅ごと小さくデザインし、文章全体を表示させた時の統一感を重視したフォントが「刻」シリーズです。明朝体の「刻明朝フォント」とゴシック体の「刻ゴシックフォント」の2種類が用意されている「刻」シリーズは無料でダウンロードでき商用・非商用問わず自由に使用可能になっています。フリーフォントの樹 http://freefonts.jp/ その字体が持つ雰囲気はもちろんのこと、両フォントが特徴としているのは仮名と漢字の大きさにアクセントを付けたデザイン。何行にもわたる長い文章を表示させたときに、紙面そのものが一つの模様であるような統一感のある美しさを演出するように作られています。刻明朝体で文章を表示させるとこんな感じ。漢字とかな文字のサイズの違いがメリハリを与えています。一方の刻ゴシック体で同じ文章を表示させたらこんな感じ。ページ全体から受ける印象は、刻明朝体と大き

hashrock 2014/03/27

font

リンク

[CSS]文字にちょっとかわいいエフェクトを加えるスタイルシート -Opening Type

画像は一切使用せず、その文字をホバーするとパタっと開くエフェクトを実装するスタイルシートを紹介します。単に開くだけでなく、シャドウも開きに応じて変化してるのがスゴイ！日本語、しかも漢字でも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

hashrock 2013/10/29