font-size

フォント

目次一覧

 状態:試行錯誤履歴  閲覧数:3,425  投稿日:2017-05-22  更新日:2019-11-10
「ルート要素フォントサイズ指定」5案 / ブラウザデフォルトの font-size は 16px

 全体基準となるhtmlタグへのfont-size指定案

vw失敗する理由

font-size案

指定有無で異なる / その他


「ルート要素フォントサイズ指定」5案 / ブラウザデフォルトの font-size は 16px

 閲覧数:438 投稿日:2017-05-22 更新日:2019-11-10

「ルート要素フォントサイズ指定」5案


A.16px;
・ルート要素フォントサイズを「16px;」とする方式

B.100%;
・ルート要素フォントサイズを「100%;」とする方式

C.62.5%;
・ルート要素フォントサイズを「62.5%;」とする方式

D.calc(100vw / 32);
・ルート要素フォントサイズを「calc(100vw / 32);」とする方式

E.未指定
・ルート要素フォントサイズを指定しない方式

ブラウザデフォルトの font-size は 16px


100% = 1rem = 1em = 16px = 12pt
・100%=16px
・1em = 16px
・1rem = 16px

viewportの幅が1200px、高さが1000pxの場合
・100vwは1200px、100vhは1000px
・10vwは120px、10vhは100px

 全体基準となるhtmlタグへのfont-size指定案

 閲覧数:410 投稿日:2017-05-23 更新日:2017-11-07

案A.16px;


絶対値による固定
・✕


案B.100%;


ルート要素フォントサイズを「100%;」とする方式


案C.62.5%;


ルート要素フォントサイズを「62.5%;」とする方式
・全体基準となるhtmlタグのfont-size指定を、62.5%へ設定

目的
・1em を 10px とするため 
・「em」や「rem」を「切りの良い数値」で変換することで直感的に扱い易くする

62.5%=10px
100px=16px ✕ 62.5%
1em = 10px

比較一覧表
% px em
100 16 1
62.5 10 1
/* フォントサイズ */

html {
font-size: 62.5%;
}
body {
font-size: 1.4em;
}
h1 {
font-size: 2.6rem;
}
h2 {
font-size: 2.1rem;
}
h3 {
font-size: 1.7rem;
}
h4 {
font-size: 1.4rem;
}
h5 {
font-size: 1.2rem;
}
h6 {
font-size: 1.1rem;
}





案D.calc(100vw / 32);


ルート要素フォントサイズを「calc(100vw / 32);」とする方式

目的
・画面幅320pxのルート要素フォントサイズを10pxとするため

1remをビューポート幅の1/32に関連付ける
・幅が1remの要素は、常にビューポート幅の1/32になる
html {
 font-size: calc(100vw / 32);
}


その結果
・ルートのfont-sizeは画面幅に応じて変わる
・ルートより下はremを記述することでルート変更が適用される

html {
 font-size: calc(100vw / 32);
}

p {
 1.2rem;
}


試してみたが、モバイル表示時の<h3>が意図せず小さくなる
・理由不明
・✕


font-size
font-sizeは%またはpxの何れで指定する方が良い? 100%=16pxは何に基づくのでしょうか?

vw失敗する理由

 閲覧数:412 投稿日:2017-11-07 更新日:2017-11-07
PCとモバイルでは、「画面に対する文字サイズ」の比率が異なる
単純に、画面に対する比率で「文字の大きさ」を決定すると、何れかに違和感が生じる

・PCでは文字が大き過ぎる
・モバイルでは丁度良いかも
h1{
 font-size: 6vw;
}
h2{
 font-size: 5vw;
}
h3,h3 a{
 font-size: 4vw;
}
h4{
 font-size: 3vw;
}
h5{
 font-size: 2vw;
}
h6{
 font-size: 1vw;
}


・PCでは若干文字が大き過ぎるかも
・モバイルでは文字が小さ過ぎる
h1{
 font-size: 3.5vw;
}
h2{
 font-size: 3vw;
}
h3,h3 a{
 font-size: 2.5vw;
}
h4{
 font-size: 2vw;
}
h5{
 font-size: 1.5vw;
}
h6{
 font-size: 1vw;
}


font-size案

 閲覧数:399 投稿日:2017-11-07 更新日:2017-11-07

案1


迫力はあるが文字が大きいため、1表示エリアに対する情報量は少なくなる

h1{
 font-size: 2.25rem;
}
h2{
 font-size: 2rem;
}
h3{
 font-size: 1.75rem;
}
h4{
 font-size: 1.5rem;
}
h5{
 font-size: 1.25rem;
}
h6{
 font-size: 1rem;
}



案2


下記の方が無難かも
h1{
 font-size: 2rem;
}
h2{
 font-size: 1.8rem;
}
h3{
 font-size: 1.6rem;
}
h4{
 font-size: 1.4rem;
}
h5{
 font-size: 1.2rem;
}
h6{
 font-size: 1rem;
}



案3


一般的な大きさかも
h1{
font-size: 1.5rem;
}
h2{
font-size: 1.4rem;
}
h3{
font-size: 1.3rem;
}
h4{
font-size: 1.2rem;
}
h5{
font-size: 1.1rem;
}
h6{
font-size: 1rem;
}



結論


取り敢えず「案2」採用
・使用してみて厳しいようだったら「案3」へ変更

指定有無で異なる / その他

 閲覧数:410 投稿日:2017-11-28 更新日:2019-11-10

指定有無で異なる


前提
・rem使用

html {
 font-size: 100%;
}



指定
・固定

未指定
・ブラウザ大きさに応じて、フォントサイズが異なる

下記でもダメ
・要はルート要素にフォントサイズ指定していると、ブラウザ大きさに応じて、自動でフォントサイズは変更しない
html{
 font-size: 0.9rem;
}




CSSでfont-weightを指定しても、font-weightを指定しないと書体が

CSSで、「html { font-size: 100%;}」指定している時と指定していない時の違い
下記を指定している時と、指定していない時で、挙動が異なるのですが、なぜですか?
html {
 font-size: 100%;
}

------------------------------------------------------------

前提
・bodyタグには何も指定しない
・h1タグには下記を指定
h1 {
 font-size: 1.5rem;
}

その他


以前の指定例
何に基づきこの記述としたか思い出せないため、2019/11/10削除
html {
 font-size: calc(10px + 1vmin);
}



font-familyには游ゴシックを指定しない



類似度ページランキング
順位 ページタイトル抜粋
1 font-size 100
2 Modernizr 56
3 font-family設定 55
4 inputタグのsize属性 52
5 _notesフォルダ削除 48
6 IrfanView 44
7 transformプロパティ 43
8 Web Components 43
9 spacer.gif 42
10 Responsive Glid 42
11 Create Link 40
12 擬似要素(Pseudo-elements) 40
13 resizeプロパティ 40
14 History Disabler 40
15 Design系Link 40
16 Crescent Eve 38
17 Potrace 38
18 Vieas保存 38
19 cluster 38
20 Awesome Screenshot 37
2024/10/05 9:36 更新
週間人気ページランキング / 9-28 → 10-4
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 19
2 鉄道会社毎のカラーコード | カラーコード(色) 18
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 13
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 9
5 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 7
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 6
6 RGBの種類 / ビットカラー | RGB(色) 6
6 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 6
7 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 5
7 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 5
7 「bgcolor」「background-color」「background」の違い | CSS 5
8 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 4
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
9 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
9 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 3
9 aタグで複数のブロック要素を囲むやり方 | CSS 3
9 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
10 HTML5では「ブロックレベル要素」「インライン要素」で分類しない | HTML5(HTML) 2
10 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 2
10 Design 0 2
2024/10/5 1:01 更新