英文サイトで利用したいフォントスタイル等々（初心者）

英文フォントの参考画像

英語のサイトを初めて制作したということで少しメモ。

日本語とは全然違うということに気付かされた。

当たり前だが、フォントがまず違うので日本語サイトを作成する感覚でいると痛い目をみる。

特に気をつけたいのがline-heightである。

そして、どのフォントを使用するか。

英語サイトを作成したことがなかったのでフォント選びにも悩まされた。

少しではあるが、どのようなスタイルを使用したかをメモしました(^^ゞ

英文のサイトはフォントの種類でメリハリをつけていた。

参考にしたのはやはり大手「The Time」だ。

黒と赤をベースに非常に見やすいサイトであった。

フォントの種類はあまりまだ知らないので、これは今後の課題ではあるが、以下を見比べてみるだけでも違いがよくわかる。

フォントの比較

そこで Times が使用していたスタイルを調査してみた。

h1{
font-family: 'arial black',arial,sans-serif;
}

h2 {
font-family: 'arial black',arial,sans-serif;
}

h3{
font-family: arial black,arial,helvetica,sans-serif;
}

p.date{
font-family: arial,sans-serif;
font-size: 11px;
}

p {
font-family: georgia,'times new roman',serif;
}

p{
font-family: arial,helvetica,sans-serif;
}

p{
font-family: georgia,serif;
}

p{
font-family: 'arial black',arial,sans-serif;
font-size:24px;
}

ざっとこのような感じでした。

pタグが少し多いと思われますが、これは私個人が書き出すために仮で書いたものです。
ご注意ください。

私個人がフォントに利用したスタイルは以下

body{
font-family: georgia,'times new roman',serif;
line-height: 1.6em;
font-size: 62.5%;
}

p{
margin:0 0 10px 0;
padding:0;
font-size:1.2em;
line-height:1.6em;
}

h2{
border-left:#45cce1 solid 7px;
font-weight:bold;
font-size:1.6em;
line-height:1.3em;
padding:0;
margin:0;
font-family: 'arial black',arial,sans-serif;
}

div#read_area{
font-size:1.0em;
margin:0 10px 0 0;
font-family:Verdana, Geneva, sans-serif;
}

.cap{
	margin-top:5px ;
	margin-bottom:0;
	font-size:1.0em;
	line-height:1.4em;
	padding:0;
	text-align:left;
}

ざっと書くとこのような感じです。

初めての英語サイトということでこれから改良の余地が十分にあるな…。

ただ次も0ベースでスタートするということは時間のムダになってしまうので上記を参考にサイトを作成していこうかと。