font-size

フォント

目次一覧

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

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

vw失敗する理由

font-size案

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


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

 閲覧数:328 投稿日: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指定案

 閲覧数:306 投稿日: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失敗する理由

 閲覧数:311 投稿日: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案

 閲覧数:301 投稿日: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」へ変更

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

 閲覧数:313 投稿日: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);
}


Twitter検索結果。「font-size」に関する最新ツイート

⁽⁽ ☝🏻 ⁾⁾ みゅ⁽⁽ ☝🏻 ⁾⁾ @go_to_take
名村 晋治@Webディレクター27年目 @yakumo

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



類似度ページランキング
順位 ページタイトル抜粋
1 Modernizr 56
2 font-family設定 55
3 inputタグのsize属性 52
4 _notesフォルダ削除 48
5 IrfanView 44
6 transformプロパティ 43
7 Web Components 43
8 spacer.gif 42
9 Responsive Glid 42
10 resizeプロパティ 40
11 Design系Link 40
12 History Disabler 40
13 擬似要素(Pseudo-elements) 40
14 Create Link 40
15 Crescent Eve 38
16 Potrace 38
17 cluster 38
18 Vieas保存 38
19 Font Awesome 4.7.0 37
20 Awesome Screenshot 37
2023/1/27 10:51 更新
週間人気ページランキング / 1-20 → 1-26
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 44
2 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 32
3 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 21
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 18
5 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 15
6 GIFアニメーション | 画像 12
6 「bgcolor」「background-color」「background」の違い | CSS 12
7 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 11
7 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 11
7 CSSでループ処理。一定間隔で(背景色等を)繰り返し指定する | CSS 11
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 10
9 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 9
9 Design 0 9
9 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 9
9 ICCプロファイル | カラーマネージメント(色) 9
9 RGBの種類 / ビットカラー | RGB(色) 9
10 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 8
11 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 7
11 アイコンを「Font Awesome」から変更。→「自分で探したSVG」を「自分のserver」へアップロード | アイコン(デザイン) 7
11 「属性」「プロパティ」「アトリビュート」の違い | CSS 7
2023/1/27 1:01 更新