こんにちは
style.css
line:484
body {
font-size: 14px;
font-size: 1rem;
font-family: Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
color: #444;
}
なので、14pxだと思います
text-rendering: optimizeLegibility;
は、カーニング（ 幅 ）に関する指定で、
http://terkel.jp/archives/2012/09/text-rendering-optimizelegibility/
等が参考になるかもしれないです。
nobitaさま いつもありがとございます。
>なので、14pxだと思います
では、なぜ「line-height：3.692307692」でナビの縦幅が48ｐｘになるのでしょうか？
カーニングとは、文字と文字の間隔のことですよね？
————————
ホーム サンプルページ ↑↓←この幅がなぜ48pxになるのでしょうか
————————
指定を拾ってみると
1.714285714 | 25.71428571 | 24 | 22.28571428
0.785714286 | 11.78571429 | 11 | 10.21428572
0.428571429 | 6.428571435 | 6.000000006 | 5.571428577
0.428571429 | 6.428571435 | 6.000000006 | 5.571428577
0.857142857 | 12.85714286 | 12 | 11.14285714
1.714285714 | 25.71428571 | 24 | 22.28571428
3.428571429 | 51.42857144 | 48.00000001 | 44.57142858
3.692307692 | 55.38461538 | 51.69230769 | 48
0.928571429 | 13.92857144 | 13.00000001 | 12.07142858
1.714285714 | 25.71428571 | 24 | 22.28571428
1.285714286 | 19.28571429 | 18 | 16.71428572
0.928571429 | 13.92857144 | 13.00000001 | 12.07142858
な、感じなので
2列目 1列*15
3列目 1列*14
4列目 1列*13
3.692307692は、作った人の間違いだと思います。
グローバルナビの幅は48ピクセルあります。
Chromeでみると44px(高さ)となっているみたいですが、
.main-navigation li {
margin-top: 24px;
margin-top: 1.714285714rem;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 1.42857143;
}
の影響を受けて、12pxだとすると、44.3076923 うーん？
理屈的には、.main-navigation li aがあたるんだと思いますが、じゃ、なんで、liに12pxのフォントサイズ指定するわけ、などとなると、ちょっと見ただけでは、理由が想像できません。
ブラウザが、実際に適用しているフォントと、そのフォントのサイズがあるなしだとか、微妙な事もあると思います。
ありがとうございます。
liの継承でサイズが変わっているのかと思って、フッターに「li」なしの帯を作りました。
その文字に「line-height：3.692307692」をすると、48pxになっています。
なぜこれほど気になるかと言うと、cssの説明で
Vertical spacing between most elements should use 24px or 48px to maintain vertical rhythm:
が、なんとなく24pxか48pxを使えって書いてあるような気がしました。（私は英語はわかりません）
グローバルナビが48pxなので、「おー、こんなところまで48pxだー」と驚き、そしてこの幅を正確に変更しようと思ってきになっております。
ちょっと、14pxというのは、怪しいかもしれないので、あとで調べて書きます。
14pxは、正しいですが、根拠が違いました
/* Body, links, basics */
html {
font-size: 87.5%;
}
が、remフォントサイズのベースです。
CSSのリセット後のデフォルトフォントサイズが概ね16pxなので、その87.5%で14pxです。
http://miiracode.com/css/font-size-css.html
が、なんとなく24pxか48pxを使えって書いてあるような気がしました。（私は英語はわかりません）
英語圏の人の、リズムと、日本人のリズムは同じですか？
私は、英語のテーマを使ってみて、日本語にすると、なんかちょっとという感じがすることがよくあります。
考え方を学んで、具体は、自分流にするといいんじゃないかと思います。
/*584*/
/* .main-navigation li a のfont size 12pxがセットされます */
.main-navigation li {
margin-top: 24px;
margin-top: 1.714285714rem;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 1.42857143;
}
/*1472*/
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
}
/*1477*/
/* 12pxのフォントにline height 3.692307692 がセットされます */
.main-navigation li a {
border-bottom: 0;
color: #6a6a6a;
line-height: 3.692307692;
text-transform: uppercase;
white-space: nowrap;
}
/*1472*/
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
}
/*1484*/
.main-navigation li a:hover {
color: #000;
}
/*1487*/
.main-navigation li {
margin: 0 40px 0 0;
margin: 0 2.857142857rem 0 0;
position: relative;
}
/* 結果として、44.3076923pxのline heightになります*/
chrome のスナップショット
なので、誤指定の3.692307692や.main-navigation liのフォントサイズの指定のしなおし、等でheight 48px表示に対応できると思います。
nobitaさま ありがとうございます。
今から、ゆっくり確認します。（私の実力では、見ただけではわからないので、実際に確かめながら理解します。）
>英語圏の人の、リズムと、日本人のリズムは同じですか？
実は、今回デザインの勉強をあらためてしています。
「私のデザインは、なぜオシャレじゃないのか？」
と自分の見てつくづく思いました。
そして、なぜオシャレなサイトは、なぜおしゃれに見えるか？シンプルなのに。
ってことで、いろいろ追求しています。
そのため、今まで適当だったCSSもpx単位で指定してテンプレートを作っています。
さて、今回デザインについての本をたくさん読みました。それなりに原則を覚えました。そこで実践です。しかし、思うような成果がでません。
そして、周りにアドバイスしてくれる人がいません。
そこで、Twentytwelveのルールを出来るだけ守りながら作れば、それなりのものが出来るかと思ってやっています。Twentytwelveは、かなりシンプルですが、悪くは無いので・・・
だから、日本語とアルファベットでは感覚的に違う事はわかっていますが出来るだけルールを守っています。
