HomeArchive注目記事ArchiveWEB技術
▲2003-1223  ▼2003-1224

2003/12/23

box font-familyに指定する英語フォント はてなブックマークに追加 MM/memo投稿 del.icio.us entry

 コジャレなサイトのためのフォント選択を小ネタのつもりで書いたら、意外と反応があったので、ちょっとまとめてみます。
はてなダイアリー - おまえにハートブレイク☆オーバードライブ : コジャレ vs ヤンキー
はてなダイアリー - アクティブにいきたいねと思いつつ日記 : コジャレサイトにな(略)そのさん(フォントの話)

 ウチのサイトでは、「Verdana」を基本に、「Arial Black」(1バイト文字のみで強調したい場合)、「Century Gothic」(メニュー部分)、「Times New Roman」(日付表示)(※名前に空白が入るフォントをスタイルシートで指定する時は""で囲む。ただし、一つのみの場合はいらない)を使い分けているんですが、Century Gothicはファンシーですか! Futuraみたいに曲線が少ないから、かっこいい方になると今まで思ってました…。

全標準フォント一覧 / もうパンツはかない
 こちらでOS XとWindows XPで標準搭載されているフォントがわかります。

 Windows、Macintosh、どちらでもオッケーな英語フォントをちょっとならべてみました。上が普通、下はfont-size:largeです。ただし、もともと本文はfont-size:95%になっています。文字サイズ標準でfont-size:largeになると、どのフォントも太めになり、見た目がかなり変わるので、その辺を意識して使うとデザインしやすいです。

■Verdana
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお
 「Verdana」がよく使われる理由は下のページを参照のこと。文字サイズが小さい時にVerdanaは利点が出てきます。
HotWired Japan : Webmonkey : graphics_fonts : ウェブ・タイポグラフィー・チュートリアル――第2日(第1回)

■Arial
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお
 「Verdana」に似ているけど詰まり気味。

■Arial Black
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお
 これにBold指定をかけるとちょっとうるさい。

■Century Gothic
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお

 細くてちょっと頼りないのでBold指定をかけてみました。Bold指定かけた方が幅が狭いというのが不思議。

■Times New Roman
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお

 Operaだと日本語が明朝に。

■Comic Sans MS
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお
 これこそファンシーなのではないかと!

■Lucida Sans Unicode
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお
 これはWindowsのみのもの。IEだと日本語本文が強制的にMS UI Gothicに。

■Trebuchet MS
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお
1234567890 ABCDEFabcdef あいうえお

 これもWindowsのみのもの。TypePadのデフォルトスタイルで指定されているフォントです。

 CSSはソリッドなデザインに強いから、どうしてもコジャレ系になっちゃって、栗原さんの言うようなヤンキー臭いデザインは難しそうです。とりあえず紫色を多用すると、ヤンキー(というか族臭い)のではないでしょうか。あと文字は太めの明朝とか。

Amazon Search
−この記事に関連しているかもしれない書籍−
Comments
TrackBack −この記事に言及したサイト−
Weblog: SHADOW ZERO BLOG Tracked: 2003/12/24 05:23
Excerpt: font-styleに指定する英語フォント http://artifact-jp.com/mt/archives/200312/fontstyle.html 最近、人口事実のネタばっかり引っ張っているような気がする(笑) さて、LEGIOんとしては、 標準フォント一覧 http://aor.ktplan.jp/fonts/allfonts.html これが便利。...
Weblog: HowSoonIsNow? Tracked: 2003/12/24 07:56
Excerpt: もうパンツはかない - 全標準フォント一覧 - WinMeとOS Xの標準搭載フォント一覧 HotWired Japan : Webmonkey : graphics_fonts : ウェブ・タイポグラフィー・チュートリアル――第2日(第1回) Verdanaが良く使われる理由。ビットマップを作ってからアウトライン化したんだ...
Weblog: Scarly's DIARY(おすでげす) Tracked: 2004/03/20 14:42
Excerpt: ■MovableTypeの改造中 css:スタイルシート編 「僕が本当に若かった頃」: のんびりblogいじり  どこかで、「blogいじりは盆栽いじりのようなもの」という主旨の発言を読みましたが、本当にその通りだと思います(盆栽いじりをやったことはないけど)。  MovableTypeの改...
Weblog: 404 Tracked: 2004/03/29 15:23
Excerpt: Bulkfeeds 未経験者が憶測で書いてみました。
Weblog: X *ole.net Tracked: 2004/05/29 20:47
Excerpt: ブログをデザインする際にはページ全体の配色やブラウザに左右されない配置など色々悩むことが多いわけです。特にフォントやタグなどはブラウザやOSによって見え方が結構違ってくるので悩みどころ。これから、デザインを変更する方に参考にしていただきたいリンクをご紹介
Post a comment










※コメントの内容が、「意味がない」「元の記事と関係がない」「他人のプライバシーを侵害している」「他人を中傷している」など問題があると管理人が判断した場合、削除させていただくことがありますので、ご了承ください。
※コメント欄で初めて書き込まれる場合でも、挨拶は必要ありません。
※その他、コメントを書き込む際はこちらの注意をご覧ください。
TrackBack
この記事へのダイレクトリンク

この記事へのTrackBack URL

※spam TrackBackの対策のため、TrackBackのURLは「http://artifact-jp.com/mtcgi/mt-trback765.cgi/xxxx」にしてあります。上記のものとは違いますのでご注意ください。
※TrackBackは削除することもありますので、ご了承ください。
※その他、TrackBackについてはこちらの注意をご覧ください
HomeArchive注目記事ArchiveWEB技術