font-size

フォント

目次一覧

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

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

vw失敗する理由

font-size案

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


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

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

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

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

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

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

 閲覧数:151 投稿日: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」に関する最新ツイート

ミヤビ MIYABI @miyabi_o_t
cam@目指せ推しと世界一周 @seicamera1994
猫るひたき @kayachihitaki
いしまるは忘れん坊将軍 @tsugu_maru_san

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



類似度ページランキング
順位 ページタイトル抜粋
1 Modernizr 56
2 font-family設定 55
3 inputタグのsize属性 52
4 _notesフォルダ削除 48
5 XnConvert 44
6 IrfanView 44
7 Web Components 43
8 transformプロパティ 43
9 spacer.gif 42
10 Responsive Glid 42
11 History Disabler 40
12 resizeプロパティ 40
13 擬似要素(Pseudo-elements) 40
14 Design系Link 40
15 create link 40
16 Material Design Colors 39
17 Crescent Eve 38
18 Vieas保存 38
19 Potrace 38
20 Awesome Screenshot 37
2021/7/24 20:30 更新
週間人気ページランキング / 7-17 → 7-23
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 53
2 血の色 / #b30000 / #360800 / #ff0000 | 色 26
3 Design 0 23
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 17
5 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 15
6 HSLとHSVの違い | 色変換(色) 14
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 13
8 「bgcolor」「background-color」「background」の違い | CSS 12
8 「CSSキーフレームアニメーション」実行後のCSS設定 | アニメーション 12
9 RGBの種類 / ビットカラー | RGB(色) 11
10 画面キャプチャ | Chrome 拡張機能(ブラウザ) 9
11 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 8
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 8
11 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 8
12 16進数カラーコード / 2進数 7
12 コズミックブルーが何色か分からない | 色 7
13 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 6
13 100/7%ではなく100%/7。(100/7)%ではなく(100%/7) | CSS 6
13 グラデーション練習 | Fireworks 8(Fireworks) 6
13 「属性」「プロパティ」「アトリビュート」の違い | CSS 6
2021/7/24 1:01 更新