web-dev-qa-db-ja.com

モバイル向けのベストプラクティスフォントサイズ

私はSOでこの質問を見ました：

H1-H6タグの最も一般的なフォントサイズは何ですか これはHタグの推奨フォントサイズです：

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

これらの携帯電話向けの「ベストプラクティス」はありますか？ -iPhoneの画面サイズを言う？

htmlcssmobile
31
raklos

質問のフォントサイズは、ヘッダー自体のサイズ（ピクセル単位）ではなく、各ヘッダーの相対的な比率の例です。

あなたの質問に答えて「携帯電話用のこれらの「ベストプラクティス」はありますか？-iPhone画面サイズを言いますか？」 -しかし、誰かが「ベストプラクティス」はあなたのレイアウトでは機能しないと言うことを見つけるかもしれません。

ただし、正しい軌道に乗せるために、 レスポンシブレイアウトの構築に関するこの記事 は、ベースfont-sizeデバイスの画面サイズに関連するピクセル単位。

その記事で提案されている画面解像度の推奨フォントサイズは次のとおりです。

@media (min-width: 858px) {
    html {
        font-size: 12px;
    }
}

@media (min-width: 780px) {
    html {
        font-size: 11px;
    }
}

@media (min-width: 702px) {
    html {
        font-size: 10px;
    }
}

@media (min-width: 724px) {
    html {
        font-size: 9px;
    }
}

@media (max-width: 623px) {
    html {
        font-size: 8px;
    }
}
41
My Head Hurts

受け入れられた答えに対する私のコメントに基づいて、12pxより小さいフォントサイズを宣言することで遭遇する可能性のある多くの潜在的な落とし穴があります。 12px未満の計算されたフォントサイズにつながるスタイルを宣言することにより、次のようになります。

html {
  font-size: 8px;
}
p {
  font-size: 1.4rem;
}
// Computed p size: 11px.

Chromeなどのブラウザで問題が発生します。中国語の言語パックでは、12pxで計算されたフォントサイズを12pxとして自動的にレンダリングします。したがって、次のようになります。 true：

h6 {
    font-size: 12px;
}
p {
   font-size: 8px;
}
// Both render at 12px in Chrome with a Chinese language pack.   
// How unpleasant of a surprise.

また、アクセシビリティの理由から、一般に12px未満のサイズを使用すべきではないと主張します。キャプションなどのケースを作ることができるかもしれませんが、ブラウザのセットアップに驚いて、おばあちゃんがコンテンツを読んでいるときに目を細める準備をしてください。

代わりに、次のようなものを選択します。

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2.25rem;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.75rem;
}

h5 {
    font-size: 1.5rem;
}

h6 {
    font-size: 1.25rem;
}

p {
    font-size: 1rem;
}

@media (max-width: 480px) {
    html {
        font-size: 12px;
    }
}

@media (min-width: 480px) {
    html {
        font-size: 13px;
    }
}

@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}

@media (min-width: 992px) {
    html {
        font-size: 15px;
    }
}

@media (min-width: 1200px) {
    html {
        font-size: 16px;
    }
}

tonsofsites は、p要素であっても、かなり大きなフォントサイズを使用してアクセシビリティに焦点を合わせなければならないことがわかります。 。

補足として、margin-bottomをfont-sizeと等しく設定することも、通常魅力的である傾向があります。

h1 {
    font-size: 2.5rem;
    margin-bottom: 2.5rem;
}

がんばろう。

4
nikk wong

Emのすべては、サイズがベースに対して相対的であることです。したがって、ベースを変更することでフォントサイズを維持できると思います。

例：ベースが16pxで、pが.75em（12px）の場合、ベースを約20pxに上げる必要があります。この場合、pは約15ピクセルに等しくなります。これは、携帯電話に個人的に必要な最小値です。

1
Florian Rachor