font-familyに指定する英語フォント : ARTIFACT ―人工事実―
Logo
 
この記事は書いてから 16年 経過しています。


このエントリーをはてなブックマークに追加
はてなブックマーク - font-familyに指定する英語フォント
Pocket

 コジャレなサイトのためのフォント選択を小ネタのつもりで書いたら、意外と反応があったので、ちょっとまとめてみます。
はてなダイアリー - おまえにハートブレイク☆オーバードライブ : コジャレ 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はソリッドなデザインに強いから、どうしてもコジャレ系になっちゃって、栗原さんの言うようなヤンキー臭いデザインは難しそうです。とりあえず紫色を多用すると、ヤンキー(というか族臭い)のではないでしょうか。あと文字は太めの明朝とか。


これまでのコメント

  1. フォントの話

    font-styleに指定する英語フォント http://artifact-jp.com/mt/archives/200312/fontstyle.html 最近、人口事実のネタばっかり引っ張っているような気がする(笑) さて、LEGIOんとしては、 標準フォント一覧 http://aor.ktplan.jp/fonts/allfonts.html これが便利。…

  2. HowSoonIsNow? より:

    フォント

    もうパンツはかない – 全標準フォント一覧 – WinMeとOS Xの標準搭載フォント一覧 HotWired Japan : Webmonkey : graphics_fonts : ウェブ・タイポグラフィー・チュートリアル――第2日(第1回) Verdanaが良く使われる理由。ビットマップを作ってからアウトライン化したんだ…

  3. MovableType改造css編

    ■MovableTypeの改造中 css:スタイルシート編 「僕が本当に若かった頃」: のんびりblogいじり  どこかで、「blogいじりは盆栽いじりのようなもの」という主旨の発言を読みましたが、本当にその通りだと思います(盆栽いじりをやったことはないけど)。  MovableTypeの改…

  4. 404 より:

    Bulkfeeds のキーワード

    Bulkfeeds 未経験者が憶測で書いてみました。

  5. X *ole.net より:

    ブログをデザインする時に

    ブログをデザインする際にはページ全体の配色やブラウザに左右されない配置など色々悩むことが多いわけです。特にフォントやタグなどはブラウザやOSによって見え方が結構違ってくるので悩みどころ。これから、デザインを変更する方に参考にしていただきたいリンクをご紹介

About

1997年から運営している個人サイト。2002年にブログ化。オタクネタを中心で書いていたが、最近はウェブサービスの話題が多い。
サイトの詳細
旧Movable Type版(2002/12から2006/11まで)
2002/12以前

Twitter Flickr
ARTIFACT@ハテナ系
はてなダイアリー
ARTIFACT BOOKMARK
はてなブックマーク
ARTIFACT clipper
tumblr
ARTIFACT@photologue
tumblrで運営している写真ブログ

AD

Recommend


59 queries. 0.385