基本的だけど大切なタイポグラフィのシンプルな14のルール
ウェブデザインをはじめ、印刷にも役立つ基本的だけど大切なタイポグラフィのルールをfred designから紹介します。 Simple rules for good typography もしくは、Typophile 下記は、その意訳です。 はじめに ここにウェブや印刷のためのタイポグラフィに役立つ基本的なルールがあります。もちろん、このルールは基本であり、そしてルールは破られることを意図されているものです。 しかしながら、もしあなたが一般的にきちんとしていて美しくみえる何かを制作するためには良いルールです。 1. たくさんのフォントを使わない ウェブサイトなどのドキュメントに一貫性は非常に重要な要素です。一貫性は統一と一つのアイデンティティーをもたらします。 この一貫性を守るためには、一つのドキュメントに対して3つ以上の異なるフォントを使用しないことです。 2. ヒエラルキー ページ内の階
インストールせずに、好きなWeb Fontsを使おう
WebFontsとは WebFontsを利用すると、Web上にあるフォントファイルを読み込んでフォントを表示できます。これまではクライアントPCにインストールされているフォントのみが利用できましたが、WebFontsではクライアントにインストールされていないフォントを表示できるようになります。 以下のサンプルはGoogle Web Fontsで提供されるWebFontsを利用しています。サンプルは IE 9／Firefox 6／Chrome 12／Opera 11.5／Safari 5.1 で動作確認済みです。 このようにWebFontsを利用することで、さまざまなフォントによる表示や表現ができます。 それぞれのフォントにはライセンスがあります。サーバにフォントファイルを格納する場合は、再頒布に該当するため、注意が必要です。フォント提供サービスを使う場合も、ライセンスをしっかり確認しただし
今更聞けない？！WEBデザイナーなら最低限知っておきたい有名フォントの数々 | バンクーバーのうぇぶ屋
最近、フォント名を知らないデザイナーが増えてきていると思うんですよね。 実は使ってるんだけど、どのフォントを使っているか意識していなくて、「これ何のフォント？」と聞くと、「ちょっと待ってくださいね。調べます。」という会話を良く耳にするようになったような気がします。「会社のPCに入ってたー」みたいなノリでしょうか。 というわけで、今日は僕がWEB屋をやってきた中で、「最低限、これは知っておいた方がいいんだろうな」と思ったフォントを幾つかご紹介。 英文フォントを中心に、色々有名どころを総当りしていきます。主に僕が仕事で使ったことがある物を中心に紹介していきますね。（順不同、のつもりで僕の好きな順） Helvetica 世界中のデザイナーに愛されるデザイナーフォントと言えばやっぱりHelveticaですよね。 元はスイスのデザイナーによって作られたフォントでMacだと標準フォントのひとつになって
第10回：Windowsフォントをアンチエイリアスでキレイに見せる方法 | Creazy!
メインPCをMacに移して一番驚いたのは、Macで表示されるフォントの美しさかもしれません。 Macでは基本的に全てのサイズのフォントにアンチエイリアス（スムージングともいう）処理が施されています。 アンチエイリアス (Anti-alias) はコンピュータで画像・映像を制作・加工・表示する際に、滑らかな画像を得る処理のこと。 アンチエイリアス – Wikipedia 逆にWindowsではデフォルトではアンチエイリアスがかかっていないのでギザギザした印象の文字になってしまいます。一旦、慣れてしまうとどうしてもこの滑らかな文字が愛おしくなってしまって、なんとかWindowsでもアンチエイリアスにできないかと考えました。特にこのブログのリニューアルにあたって、MacとWindowsの両方で動作確認をするとあまりの違いに愕然としてしまったので、真剣に調べ始めたというわけです。 Windowsフ
Webデザインで最も愛されているフォント16選『16 Best-Loved Font Bits In Web Design』 | CREAMU
Diary Webデザインで最も愛されているフォント16選『16 Best-Loved Font Bits In Web Design』 Webデザインでよく使われるフォントはなんだろう。 そんなときにおすすめなのが、『16 Best-Loved Font Bits In Web Design』。Webデザインで最も愛されているフォント16選だ。 以下にご紹介する。 1.Helvetica, Helvetica Neue, Arial 2.Verdana 3.Georgia 4.Trebuchet MS 5.Century Gothic 6.Lucida Sans Unicode, Lucida Grande 7.Palatino 8.Garamond, Baskerville, Caslon 9.Univers Condensed, Linotype Univers 10.Myriad
標準の日本語フォント / もうパンツはかない
各環境でどんな日本語フォントが使えるのか、まとめてみました。 それぞれのOSで標準添付されていると思われる日本語フォントをCSSの指定で表示させたものをキャプチャーしました。小さい方の字は16ピクセル、大きい方は 150% とCSS上で指定しています。使用ブラウザは主に各環境の標準ブラウザ(MacはSafari、WindowsはEdge)です。 Mac Windows Linux macOS Sonoma (14) ヒラギノ角ゴシック (ウェイト:W0〜W9の10段階) font-family: "HiraginoSans-W0","Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 100; font-family: "Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 400; font-family: "Hiragino S
見出しやコピーにぴったりな太字の無料・有料フォントのまとめ
ヘッドラインやキャッチコピーなどにぴったりな太字の無料・有料の英字フォントをPSDFanから紹介します。
Kerning Live Web Type With jQuery and Lettering.js
Yesterday we published an article outlining Eight Simple and Useful Tips for Kerning Type. This mostly focused on the basics of kerning: what it is, how it works, letter pairs to keep an eye on, etc. Today we’re following that up with a discussion on how to use Lettering.js to kern your web type. Don’t worry, it’s much easier than you think! 19 Million+ Digital Assets, With Unlimited Downloads Get
[CSS]日本語と英語で異なる最適なフォントサイズの指定方法
日本語・英語のサイト制作に使用しているCSSのフォントサイズの指定で、2007年用デフォルトとしているものです。 %指定を採用している理由の１つは、font-size、line-heightとともに組み合わせにより微妙に異なり、その組み合わせの最適な値を採用するためです。 日本語サイトのフォントサイズの指定 英語サイトのフォントサイズの指定 line-heightの指定 日本語サイトのフォントサイズの指定 body{ font-size:16px; /**/ font-size:100%; /**/ } 上記を基準サイズとして、下記を指定。 標準： font-size:82%; 大きめ： font-size:94%; 小さめ： font-size:69%; 英語サイトのフォントサイズの指定 body{ font-size:13px;*font-size:small;*font:x-smal
![[CSS]日本語と英語で異なる最適なフォントサイズの指定方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
[CSS]フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック
フォントのサイズの単位に何を使ってますか？ px？ em？ それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
TypeKit で広がる Web デザインの可能性
今年の 5月頃に発表されて、@font-face 時代の幕開けだぜと期待をふくらませていた Web サービス、「TypeKit」 が正式に公開され、誰でも使用できるようになりました。TypeKit は、権利問題をクリアした多くのフォント一覧から自分の好きなフォントを選んで、簡単なソースコードを Web ページに埋め込むだけで @font-face によるフォントの指定が行えるようになるサービス。今までフォントの関係から画像で処理していた部分をテキストデータとして処理しつつある程度自由にフォントを選べるので、デザイナーにとっては表現の幅が広がるのではないでしょうか？ 今年の 5月頃に発表されて、@font-face 時代の幕開けだぜと期待をふくらませていた Web サービス、「TypeKit」 が正式に公開され、誰でも使用できるようになりました。 Typekit is live ： The
Hints of fonts on the web -- Introduction
Section 1：概説 Section 2：画像化テキスト Section 3：サンセリフ欧文(1) Section 4：サンセリフ欧文(2) Section 5：サンセリフ欧文(3) Section 6：セリフ欧文(1) Section 7：セリフ欧文(2) Section 8：セリフ欧文(3) Section 9：草書系・筆書系欧文(1) Section 10：草書系・筆書系欧文(2)・装飾系欧文 Section 11：等幅欧文・その他の欧文 Section 12：ゴシック系和文(1) Section 13：ゴシック系和文(2) Section 14：明朝系和文(1) Section 15：明朝系和文(2) Section 16：その他の和文 Appendix A：無償利用できるフォント Appendix B：Windows の標準フォント Appendix C：PostScript
Google Font API で手軽に始めるフォント遊び
昨日開催された WDE ex -vol9 (Twitter TL) の懇親会で「Google がフォントのホスティングやれば良いじゃないか」という話題が出ていたのですが、朝起きたら Google Font API として現実的なものとなっていました。Web Font をホスティングしているサービスは海外で既に幾つかありますが、ほとんどが JavaScript のコードを貼付ける方法が採用されており、中には body 内に記述しなければならないものもあり、エレガントな方法とはいえませんでした。 今回公開された Google の API は JavaScript を使うのではなく、CSS をリンクするだけ。使いたいフォントをディレクトリから選び、リンクした CSS ファイルに変数としてフォント名を記述するだけになります。シンプルかつ簡単です。 <link rel="stylesheet" ty
GoogleがWebフォントサービスを開始 - フォントブログ
Webフォントが一般に広まった全盛期には国内外含め様々なWebフォント配信サービスが登場しましたが、まさに戦国時代そのもので、数年後には多くのサービスが終了となってしまいました。 2023年現在、利用されているWebフォントサービスをまとめてみました。 Google Fonts 完全無料で誰でも利用可能ということもあり、現在一番利用されているGoogle Fonts。定番のNoto Sans以外にも、ZEN 角ゴシックやBIZ UDゴシックなど、プロ仕様の日本語フォントも使えます。デスクトップ用のフォントもダウンロード可。 Adobe Fonts Adobe Creative Cloud契約者なら誰でも使えるAdobeのフォントサービス。かつてはTypekitの名でサービス展開されていました。完全に日本語化され昔に比べるととても使いやすくなりました。デスクトップ用のフォントもダウンロード可
Webフォントを使ってみよう！@font-face 関連の情報いろいろ - かちびと.net
Webフォントを使う機会があった のでついでに備忘録的メモです。 @font-face関連の情報いろいろ。 と言っても、まだそんなに情報が 無いので触りを理解するための まとめ的な記事です。 Webフォントの良い所は、編集作業が不要、コピペも可能でテキストだからSEO的にも有利になりますけど、アンチエイリアスはフォントに依存しますし、日本語フォントはどうしても少なくなってしまうデメリットもあります。 クロスブラウザでWebフォントを利用するには /* IE */ @font-face { font-family: abc; src: url(abc.eot); } /* Firefox, Opera, Safari */ @font-face { font-family: abc; src: url(abc.ttf) format("truetype"); } としてあげるといいみたい。I
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
漢字もある！ 全360種以上のミニサイズ（4～15px）のフリーのピクセルフォント -Akashic Design
新着記事
使い勝手のよいエレガントなOpenTypeのフリーフォント -Lufthamn Studio
細みでスタイリッシュなフリーフォント50
http://blog.e-riverstyle.com/2010/05/google-font-api.html
