html { font-size: 62.5%; } は嫌いだ - デフォルトを変更するのは悪手です

```font-size: 62.5%;```というテクニックがありますよね:thinking:

**デフォルト値に手をかける**ので、**超絶嫌い**なテクニックのひとつです:japanese_ogre:

なのにですね、あちこちで超見かけるんですよ。
検索かけても「**便利！**」という言葉がたくさん並んでいるんです。

超嫌いなんですが、いったいどこから湧いたテクニックなのかわからない。
そこで、時間を見つけて調べようと思って、タイトルを書くだけ書いたら1年溶けてました:rolling_eyes:

そろそろ廃れる頃合いだと思うのですが、現在Webサイト制作の勉強をしている初学者間では、いまだにメインストリームを歩んでいるっぽいので、流行りに乗り遅れたなあと思いつつ、つらつら調べてみました。

# html { font-size: 62.5%; } の概要
**フォントサイズをピクセル**で指定した場合、ユーザーがブラウザ設定でフォントサイズを変更していても**フォントの大きさは変わりません**。

はっきり言って**アクセシビリティ的ではない**ので、**相対でフォントサイズを指定できる**```rem```や```em```といった単位を使うのが最近の主流です。

**ブラウザのデフォルトを変更していなければ**、基準となるフォントサイズは**16px**になりますが、```1rem = 16px```という値は少々計算しづらい。

**30pxにしたい時は1.875rem**と端数が出るし、計算機を叩くはめになるので、「**ぱっと見でサイズが読めない**」人も出てきます。

そこで、次のようにCSSを書いて、ルートフォントを**10pxに変更**するという手法が広まったようです。
```CSS:CSS
html {
    font-size: 62.5%;
    /*16px * 62.5% = 10px*/
}

p {
    font-size: 1.6rem;
    /*10px * 1.6 = 16px*/
}
```
テキストが入る要素に```font-size: 1.6rem```と書けば、**ひとめで```16px```** だとわかります。

# font-size: 62.5%;を採用しているWebサービスを探す
嫌いは嫌いだけど、```font-size: 62.5%```を採用しているサービスはいくつあるのかな？という事で、簡単に調べてみる事にした。
デスクトップだけを軽く調べたので、スマホはもう少し違うかもしれない。
|サイト名|62.5%|サイズ指定|印象|メモ|
|:-----|:-----:|:-----:|:-----:|:-----|
|[Google検索](https://www.google.co.jp/webhp)|×|body: 14px|:neutral_face:||
|[Google Chrome ヘルプ](https://support.google.com/chrome/?hl=ja#topic=7439538)|×|-|:smiley:|ブラウザの基準サイズを使用。<br>他フォントサイズは```rem```使用。<br>本文は```.875rem```か```1rem```|
|[Yahoo! JAPAN](https://www.yahoo.co.jp/)|○|body: 1.4rem|:smiley:||
|[Yahoo!ニュース](https://news.yahoo.co.jp/)|×|-|:sweat:|ブラウザの基準サイズを使用|
|[楽天トラベル](https://travel.rakuten.co.jp/)|×|html: 100%|:sweat:|ブラウザの基準サイズを使用|
|[Twitter](https://twitter.com/home)|×|html: 15px|:neutral_face:||
|[Facebook](https://www.facebook.com/)|×|body: 12px|:sweat:|0.75〜1.75rem, 17pxのフォントサイズCLASSあり|
|[Instagram](https://www.instagram.com/)|×|body: 14px|:joy:|10~36pxのフォントサイズ刻みのCLASSあり|
|[Pinterest](https://www.pinterest.jp/)|×|html: 16px,<br>body: 12px|:neutral_face:|12~36pxのフォントサイズ刻みのCLASSあり|
|[TikTok](https://www.tiktok.com/ja-JP/)|×|body: 14px|:neutral_face:|12~96pxのフォントサイズ刻みのCLASSあり|
|[Qiita](https://qiita.com/)|○|body: 1.4rem|:thinking:||
|[デジタル庁](https://www.digital.go.jp/)|×|body: 16px|:thinking:||

案外使ってない:thinking:
でも、[Qiita](https://qiita.com/)は使っているのか。なんてこったい:joy:

# ブラウザの基準フォントサイズを変更してみる
数値だけ書いてもわからないので、基準フォントサイズを変更して、それぞれスクリーンショットを撮ってみた。
ウィンドウサイズはWidth1200pxで固定し、それぞれ左から16px、32px、10pxにブラウザの基準フォントを変更した。

## Google検索
基準フォントサイズを変更しても、フォントの大きさは変わらず。ただし、行間は変わる模様。
![Google検索](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/5210817d-1d37-0120-ec45-ad36a35e935a.jpeg)

## Google Chrome ヘルプ
スクショ範囲の影響で、中央にある32pxに変更したものは崩れたように見えていますが、**フォントサイズに従ってWidthも変更**されるので、表示に問題はありませんでした（上部のグローバルメニューだけは残念な事に）。
![Chrome ヘルプ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/cadc120c-fb97-f1f4-19aa-4afbcf153514.jpeg)

## Yahoo! JAPAN
数少ない```font-size: 62.5%```を採用しているサイト。
「Google Chrome ヘルプ」同様、**フォントサイズに従ってWidthも変更**されます。表示には一切の崩れがなく完璧です。
![Yahoo! JAPAN](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/aae9bff3-b6f0-12a2-e22e-bdd9ca7dfb6a.jpeg)

## Yahoo!ニュース
「Yahoo! JAPAN」が素敵だったので、ニュースの方も期待できる！と思いきや…聞かないでくださいw
![Yahoo!ニュース](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/0eef9cc9-13d1-6eac-6b5d-b7531e72d0d5.jpeg)

## 楽天トラベル
コンテンツサイズは固定のようで、32pxにすると非常に残念な事に。
![楽天トラベル](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/ff0ed30c-cf01-593e-801c-019286fcfb1c.jpeg)

## Twitter
表示変わらず。
![Twitter](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/6bb72021-8d95-dedd-4fd7-a32272128917.jpeg)

## Facebook
ある頃から、デスクトップでは使いづらいなあと思っていました。
ごく一部を除き、表示エリアのサイズは変わっていないようなので、相対レイアウトではなく、絶対レイアウトぽいですね。
![Facebook](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/19985041-5ea1-26e1-ce21-99bd14a1efe6.jpeg)

## Instagram
Google検索やTwitterと同じようにフォントサイズ変わらずか？と思っていたら、一部だけ変わっているんですよね。
「**投稿する**」
そこだけかーいwwwww
![Instagram](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/8f36060e-9d74-78a4-b141-3f7f5d16c91b.jpeg)

## Pinterest
変わらず。画像や動画をメインにするサイトならば「必要ない」という判断もありかも:thinking:
![Pinterest](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/2f6f1fe6-4d3a-720d-3a10-00691badb643.jpeg)

## TikTok
こちらも変わらず。
![TiKTok](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/a25ee26a-6bb1-cb13-15c5-209feeebb87b.jpeg)

## Qiita
ヘッダやグローバルメニューのフォント、レイアウトは可変せず固定。
記事内のタイトル以外はブラウザ設定に従っている様子。
![qiita.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/031fb7d1-32db-c544-55a6-43341b7892bf.jpeg)

## デジタル庁
コンテンツサイズは固定の様子ですが、質素というか簡素というか、シンプルな画面構成ゆえに大きくは崩れない。
このスクショはトップなんですが、**「デジタル庁」のヘッダがない**。
一瞬、どこのサイトかわからなかったwwww
あと、見切れてるけど **「マイナンバーカードの累計申請数」は画像**だから:expressionless:
![デジタル庁](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/17ee1629-bbb5-d40a-b28c-ec33a5c84af9.jpeg)

なかなかすごい事になっちゃったサイトもありますが、**デフォルトズームを大きく変えても崩れるサイトはなかった**ので、全くダメというサイトはありませんでした。
ロービジョンの方は、フォントサイズとズーム、どちらの設定を変えることが多いんだろう？:thinking:

# いつから font-size: 62.5%; が出現したのか？
https://qiita.com/NagayamaToshiaki/items/77e929d855d052863a85

「なるほどなー」とは思ったものの、ここまでくると**言い出しっぺ[^言い出しっぺ]は一体誰なのか？** という事が知りたくなった。
嫌うにしても、**理由あっての「嫌い」** の方が良いに決まっている。
[^言い出しっぺ]: [由来](https://www.weblio.jp/content/%E8%A8%80%E3%81%84%E5%87%BA%E3%81%97%E3%81%A3%E3%81%BA)はやっぱりそうなのよねえw

残念ながら、それらしい記事を発見する事ができず、やけになって```html font-size: 62.5% CSS```を年ごとに検索してみた。

[2023年1月現在](https://www.google.com/search?q=html+font-size%3A+62.5%25+CSS&client=firefox-b-d&biw=1656&bih=856&sxsrf=AJOqlzWjBcGaRwESbZ--8NKOAcJewPgbkw%3A1673242787053&ei=o6i7Y4n3Ao6K-QaxtZaADw&ved=0ahUKEwjJ1MeP47n8AhUORd4KHbGaBfAQ4dUDCA4&uact=5&oq=html+font-size%3A+62.5%25+CSS&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzIECCMQJzIJCAAQCBAeEPEEOgcIIxCwAxAnOgwIABAHEB4Q8QQQsAM6BwgAEIAEEBM6CQgAEB4Q8QQQEzoFCCEQoAFKBAhBGAFKBAhGGABQpgRY6RRgxRhoAnAAeACAAY0BiAHLBJIBAzEuNJgBAKABAcgBBMABAQ&sclient=gws-wiz-serp)、**全体件数は約33,400件**、うち**日本語ページは約2,700件**がヒットする。
この検索方法ではノイズは避けられないので、全く関係のない記事もカウントされる。
とはいえ、数が多くなれば精査するのはほぼ不可能なので、目視確認できないものは含めたままにした。
そして、なぜか日によって微妙に検索件数が変わる:thinking:
そもそも正確性を求める事が不可能な検索方法なので、あくまでも数は参考値:stuck_out_tongue_winking_eye:

|年|全体数|日本語|関連する事柄や記事|
|:-----:|:-----:|:-----:|:-----|
|[2004](https://www.google.com/search?q=html+font-size%3A+62.5%25+CSS&hl=ja&as_qdr=all&biw=1656&bih=856&tbs=cdr%3A1%2Ccd_min%3A1%2F1%2F2004%2Ccd_max%3A12%2F31%2F2004&sxsrf=AJOqlzVOhrw02WwP6OTSva52upKbA5-otg%3A1673243402648&ei=Cqu7Y7aZJ8rp-AajpJrYCg&ved=0ahUKEwi2xoy15bn8AhXKNN4KHSOSBqsQ4dUDCA4&uact=5&oq=html+font-size%3A+62.5%25+CSS&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzIECCMQJzIJCAAQCBAeEPEEOgcIIxCwAxAnSgQIQRgBSgQIRhgAUIsCWIsCYMEHaAFwAHgAgAFXiAFXkgEBMZgBAKABAqABAcgBAcABAQ&sclient=gws-wiz-serp)|2[^2]|0|[How to size text using ems｜ Clagnut by Richard Rutter](https://clagnut.com/blog/348/)|
|2005|1|0|[accessibility - minimum font size - Gunlaug's homepages](https://www.gunlaug.no/contents/wd_1_03_04.html)|
|2006|6|0||
|**[2007](https://www.google.com/search?q=html+font-size%3A+62.5%25+CSS&lr=lang_ja&hl=ja&as_qdr=all&biw=1236&bih=879&tbs=lr%3Alang_1ja%2Ccdr%3A1%2Ccd_min%3A1%2F1%2F2007%2Ccd_max%3A12%2F31%2F2007&sxsrf=AJOqlzXY_a6fQ3nz7YoYmGifo25-X7hPbA%3A1673243852568&ei=zKy7Y76OIpKP2roP1baMwAM&ved=0ahUKEwi-pNGL57n8AhWSh1YBHVUbAzgQ4dUDCA4&uact=5&oq=html+font-size%3A+62.5%25+CSS&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzIECCMQJzIJCAAQCBAeEPEEOgcIIxCwAxAnOgwIABAIEB4Q8QQQsANKBAhBGAFKBAhGGABQ2QFY2QFgwQVoAXAAeACAAVaIAVaSAQExmAEAoAECoAEByAEDwAEB&sclient=gws-wiz-serp)**|<font color="LightSeaGreen">**66**</font>|2|**初代iPhone発売**(6/29・米国)<br>[英語圏から学ぶ、body要素に対するfont-size指定方法のまとめ - Trans](https://trans.hatenablog.jp/entry/20070331/p1)|
|2008|33|1|iPhone 3G発売(7/11・22地域)|
|2009|92|1|iPhone 3GS発売(6/19)|
|2010|68|2|iPhone 4発売(6/24)。初の**Retina@2x**端末
|2011|76|1||
|2012|109|2|iPhone 5発売(9/21)。**初の4インチ**端末|
|2013|180|8||
|2014|177|19|iPhone 6 / 6 Plus発売(9/19)。6 Plusは5.5インチで**初のRetina@3x端末**|
|2015|366|47||
|2016|460|56|iPhone SE発売(3/31) ※iPhone 5sの後継機種<br>[Use rems for global sizing, use ems for local sizing｜Clagnut by Richard Rutter](https://clagnut.com/blog/2384/)|
|**[2017](https://www.google.com/search?q=html+font-size%3A+62.5%25+CSS&hl=ja&as_qdr=all&tbas=0&biw=1656&bih=856&sxsrf=AJOqlzVXTKcntSIIB50w_S45z1QSkL1QmA%3A1673244206382&source=lnt&tbs=cdr%3A1%2Ccd_min%3A1%2F1%2F2017%2Ccd_max%3A12%2F31%2F2017&tbm=)**|761|<font color="Magenta">**396**</font>|**iPhone X**発売(11/3)。**ホームボタンの廃止**、全面ディスプレイ|
|2018|790|127|
|2019|1,080|136||
|**[2020](https://www.google.com/search?q=html+font-size:+62.5%25+CSS&hl=ja&as_qdr=all&tbas=0&tbs=cdr:1,cd_min:1/1/2020,cd_max:12/31/2020&sxsrf=AJOqlzVhdGnZT72cnqhjHdo5nksakXLvFg:1673244353592&tbas=0&source=lnt&sa=X&ved=2ahUKEwiIwMX66Ln8AhV0p1YBHeVMCjkQpwV6BAgBEBQ&biw=1656&bih=856&dpr=2)**|<font color="Magenta">**1,510**</font>|159|iPhone 12発売(1/23)|
|2021|1,350|165||
|2022|1,330|132|[The 62.5% Font Size Trick in 2022 (+Infographic) - toheeb.com](https://www.toheeb.com/on/62.5-font-size-trick/)|

[^2]: 1件はPDF

関連性のない記事も含まれるし、最近は「良くない」という記事も見かけるので、肯定的意見だけではない事も加味する必要アリ。

## 全体傾向
+ 最初期の記事は**2004年** ※推定
+ 最も増加率の高い**2007年に初代iPhone発売**
+ **2020年を境に減少**している
## 日本語記事のみの傾向
+ 全体で最も増加率が高かった**2007年**に初めてBlogで紹介される ※推定
+ 増加率及び記事数が最も多い**2017年**は**ホームボタンが廃止されたiPhone X発売**

2019年あたりから **「font-size: 62.5%は良くない」** という記事がトップに上がってくるようになったので、100%肯定とはいかなくなってきている様子。

https://qiita.com/akuden/items/24b4ea6caa1b3dc1cccd

遡って**2009〜2011年**くらいの事を思い出すと、キャンペーン系サイトの**メインターゲットはデスクトップのIE、Firefox、Safari**だった。
そこに**フィーチャーフォン(ガラケー)** が続き、**スマートフォン(iPhone)は対象外**という事が多かった。

これが**2012年に入ると逆転**し、**スマートフォンがターゲット**に入り、**フィーチャーフォンは除外**されるようになった。

記事増加率や数が増えた年には、モデルチェンジをしたiPhoneの発売日があったりする。

大雑把でも傾向はわかるもんだなあ:rolling_eyes:

# font-size: 62.5%; の真意とは？
「言い出しっぺは誰？」選手権的には、Richard Rutter氏が**2004年5月18日に公開した記事**と見て良さそう。
期間指定検索では、2003年以前に遡ると全くヒットしなくなるし:rolling_eyes:
![clagnut.com](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/46e33b8f-170e-d7b2-a8a7-c0b1a653fced.jpeg)
[How to size text using ems | Clagnut by Richard Rutter](https://clagnut.com/blog/348/)

> Why ems?
>
> If the world were an ideal place, we’d all use pixels. But it’s not, we have the broken browser to contend with. IE/Win will not allow readers to resize text that has been sized in pixels. Like it or not, your readers will want to resize text at some point. Perhaps they are short-sighted, doing a presentation, using a ridiculously high resolution laptop or simply have tired eyes.  …
>
> なぜ ems なのですか？
>
> 世界が理想的な場所だったら、私たちは皆ピクセルを使うでしょう。 しかし、そうではありません。対処すべき壊れたブラウザがあります。 IE/Win では、読者がピクセル単位でサイズ変更されたテキストのサイズを変更することはできません。 好むと好まざるとにかかわらず、読者はある時点でテキストのサイズを変更したくなるでしょう。 おそらく、彼らは近視眼的で、プレゼンテーションを行っているか、途方もなく高解像度のラップトップを使用しているか、単に目が疲れている.

「**おのれIEめ…**」という気持ちはよくわかるwww

翻訳ツールを使いながら、何度も読み返したりTwitterを見た結果、「そもそもの**意図はこういう事だったのかなあ**」というのが、朧げにわかったようが気がします。

まあ、**なんとなく**って事だけなんですが。

## 固定されたフォントサイズに自由を
この話には3つの単位が出てきます。

|単位|サイズ変更|わかりやすさ|値|
|:-----:|:-----:|:-----:|:-----|
|ピクセル|×|○|絶対値|
|キーワード|○|△|基準サイズを```medium```とし、前後はその相対値|
|em|○|△|基準サイズの相対値|

**キーワードベース**はなんぞや？と思っていたのですが、文章内にあるリンク先のページで理解しました。
```xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large```[^xxx-large]というやつです。
[^xxx-large]: macOS、iPhone版ともに```xxx-large```は未対応の様子：["xxx-large" | Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/?search=xxx-large)

あまりにも使わなすぎて、その存在をすっかり忘れていましたw

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="WNKpdLP" data-user="mrd-takahashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/mrd-takahashi/pen/WNKpdLP">
  Font-Size_Keyword</a> by Mari Takahashi (<a href="https://codepen.io/mrd-takahashi">@mrd-takahashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Chrome等、最小フォントが10pxのブラウザでは```xx-small```も10pxとして描画されるようです。

「**ユーザーがフォントサイズを変更できない**」という点で、**ピクセルはアクセシビリティ的ではありません**。

しかし、フォントサイズが変更できる**キーワードベース**及び**em**も、制作者視点では「**精度に欠ける**」。

> …Keyword-based text sizing will allow all browsers to resize text so this is a possibility, but I don’t find it gives me the precision that pixels would give me. Using ems however, allows all browsers to resize text and also provides pixel-level precision and so they tend to be my unit of choice.…
>
> …キーワードベースのテキストのサイズ変更により、すべてのブラウザでテキストのサイズを変更できるようになりますが、ピクセルが与えるような精度は得られないと思います。しかし、emsを使用すると、すべてのブラウザでテキストのサイズを変更でき、ピクセルレベルの精度が得られるので、emsを選択する傾向にあります。…

**precision** = 正確さ、精密さ、的確さ、明確さ

```キーワードベース```も```em```も直感的とは言えず、パッと見た感じ「**明確にサイズを想像できない**」というのはごもっとも。

以上から、「**ユーザーがフォントサイズを変更でき、かつ制作者はピクセルと同様にサイズが想像できる**」ようにするために生み出されたテクニックと言えるでしょう。

ただ、死にそうな顔[^死にそうな顔]をして読み進めていくと疑問に思う事もあるのですよ。
[^死にそうな顔]: [こんな記事書くぐらい](https://qiita.com/mrd-takahashi/items/5e85be22025635507d34)英語の読み書きができない。読んでいたら死んでしまう。寿命が減った。

## 2004年当時の意見も聞いてみたい
この手法は**基準のフォントサイズが16pxである**という縛りがあって成立するもので、ユーザーがブラウザの設定を変更している場合は**簡単に崩壊**します。

そこで、当時、この記事を読んだ人がどんな感想を抱いたのか知りたいなと思ったわけです:thinking:
思っただけではダメなので、アーカイブを探してみました。
![How to size text using ems | clagnut/blog｜wagbackmachine](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/21170a98-6d34-c308-fd71-6fb0f1a1c459.jpeg)
[Wayback Machine - How to size text using ems | clagnut/blog](https://web.archive.org/web/20040522163752/https://clagnut.com/blog/348/)

現在は閉鎖していると思われるコメント欄が見えます。
否定的とまではいかなくても、疑問を呈している事はわかります。
ほとんどが**基準フォントは16px**と規定している部分の疑問です。

> Yep, great article. Thanx for that. But there´s one thing missing: For some reason Safari´s default font size is only 14px. So using your recommended percentual values lead to a nearly illegable font size on Safari. Luckily, Safari provides buttons to increase font size by default. I think most Safari users are able to use it. :o)
>
> うん、素晴らしい記事。ありがとうございます。しかし、1つ足りないことがあります。何らかの理由で、**Safariのデフォルトのフォントサイズは14px**しかありません。したがって、**推奨されるパーセント値を使用すると、Safariでほとんど判読できない**フォントサイズになります。 幸いなことに、Safariにはデフォルトでフォント サイズを大きくするためのボタンが用意されています。ほとんどのSafariユーザーが使用できると思います。 :o)

> The W3C create specifcations/standards for the web. Unfortunately we know that standards are oft ingnored by browser makers, designers, and users – for example…
>
> Em’s would be fantastic if :
-Netscape 4 didn’t ignore them when applied to text; and other old browsers didn’t nest incorrectly.
-Users did not reduce their default font sizes to lower than 16px.
>
> Keywords are based in the user’s default font size; so are ems: but the size of xx-small will never be smaller than 9px thereby reducing so many of the problems that users experience with ems, ie. too small text.
>
> I do not deny, of course, that pixels are the utopian solution… if it was not for IE/WIN.
>
>W3C は、Web の仕様/標準を作成します。 残念ながら、ブラウザーのメーカー、デザイナー、ユーザーが標準を無視することはよくあります。たとえば…
>
>**次の場合、Emは素晴らしい**でしょう。
> - Netscape 4 は、テキストに適用されたときにそれらを無視しませんでした; 他の古いブラウザは間違ってネストしませんでした。
> - ユーザーが**デフォルトのフォント サイズを16px未満に縮小しなかった**。
>
>キーワードは、ユーザーのデフォルトのフォント サイズに基づいています。emsも同様です。 しかし、xx-smallのサイズは9pxより小さくはならないので、ユーザーがemsで経験する多くの問題、例えば小さすぎるテキストを減らすことができます。
>
> もちろん、ピクセルがユートピア的な解決策であることは否定しません…IE/WIN がなければ。

それにしても。
2004年当時のサイト、ものすごくフォントが小さいんですよね。
![font-size_01](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/ed4c3cea-cec0-ee33-3887-14570491df87.jpeg)

``` body {font-size: 81.25%;}```で13pxだ:rolling_eyes:

![font-size_02](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/45ce46b7-fbc6-8a76-db27-3cfc63b08319.jpeg)
本文11.999pxってちっさ！:confounded:

アルファベットなのでかろうじて読めますが、現在の環境で見るとなかなかツライ。

2004年頃の主要環境は**画面解像度1024×768**で**15インチ**らしいので、Webデザイン制作時の有効サイズは**800×600**といったところ。
フォントも**本文が12px**で注釈等の小さいフォントが**10px** が主流だったので、セオリーから外れているわけではありません。
参考：[インターネットユーザーで最も多い画面解像度は1,024×768](https://internet.watch.impress.co.jp/cda/news/2004/06/22/3578.html)

# 最善手は時の流れと共に悪手に落ちる事もある
多少はすっきりした:triumph:

実のところ、この手法を知ったのはほんの数年前ですし、**実務では使った事がありません**。
**メリットも感じなかったので採用しなかった**のですが、たまたま確認したコード内で見た事をきっかけに「**なぜ？**」が再発動した次第です。

今後も制作するコードには使わないと思います[^使わないと思います]。
[^使わないと思います]: 引き継いだコードで使っていたら？…そのまま引き継ぎますが、もやもやはあると思います。

## 不確定な値を基準と定めて疑わない
IE6がターゲットブラウザになっていた頃は、CSSのバグを回避するために色々な手法がありました。
参考：[【IE6】サポート終了、お世話になったバグを振り返ってみる](https://bashalog.c-brains.jp/14/04/11-115200.php)

ここに出てくるものはかわいい方で、**原因が不可解**なものも多く、「ひと文字だけ二重に表示されれるバグ」を潰すのに朝を迎える[^朝を迎える]という経験もあります。
[^朝を迎える]: HTMLもCSSもエラーを吐かない。そもそもIEの不可解なバグは理由不明な事も多い。

2004年以前、[IEとネスケがブラウザ戦争](https://forest.watch.impress.co.jp/docs/serial/yajiuma/1205144.html)をしていたので、それの後遺症(バグ)だと思うんですけどね。
互いを出し抜こうと、ブラウザ毎のフィルタもいろいろあったし、本当にいらん事をしてくれた:rolling_eyes:

大量にある不可解なバグを避けるため、画面がほぼ真っ白になるほどのセレクタを詰め込んだ **ユニバーサル リセット(全称セレクタ リセット)** を作ったり、さまざまな**ハック(スターハックとかハッシュハックとか色々あった)** を使ってデザインを維持していた時代があります。
```css:ユニバーサル リセット (これはまだマシ)
* {
    padding: 0;
    margin: 0;
}
```
参考:[IE 6とIE 7のためのCSSハック16選（1/3） - ＠IT](https://atmarkit.itmedia.co.jp/fwcr/design/benkyo/csshack02/01.html)

デザインを維持するために使うのですが、**デメリットがないわけではない**です。

**デフォルト(基準)があるのはなぜなのか**というところを突き詰めれば、結局のところ**ユーザーと制作者**のためです。

例えばデフォルトのCSSが存在しない場合、制作者は**すべてのセレクタにさまざまな設定**をしなければなりません。
また、制作者が設定をしなかった場合、その要素は表示されない可能性もあります。**ユーザーにとっては不利益**です。

```css:CSS
html {
    font-size: 62.5%;
}
```
これはデフォルト(基準)の値を変更しますが、**値が16pxであるとは限りません**。
デフォルト(基準)とはいえ不確定な値であり、その値の決定はユーザーに委ねられています。

ユーザーに決定権があるので、```14px```だったり```20px```だったりする可能性があるわけです。
値が16px以上ある分にはまだマシですが、それ以下の場合は想定以上に文字が小さくなります。

正直「**制作者がわかりやすい**」という部分に**メリットは感じません**。
むしろ、「**変更した事による予想外のできごと**」が起こる可能性があり、**デメリットが大きい**と考えます。

## さまざまなデバイス環境がある
今回は**デスクトップかつ非Retina(高精細ディスプレイ)ディスプレイ**の話しかしていませんが、現在はスマホでの利用が非常に多いので、**メインターゲットはスマホ**という事になります。

近年は、多くのデバイスを対象としているため、**ピクセルでデザインを維持するのは非常に難しく**なってきました。
そのために、```rem,vw,vh,```等々の単位が出てきたわけで、「**ピクセルからの卒業**」を考える時期に来ています。

そうなってくると、「**計算がしやすいからルートのフォントサイズを10pxにする**」という手法は、一気に**お腐れモード**突入です。

## 終身運用担当ではいられない
サービスを閉じるまで運用を担当できれば良いですが、実際には少ないと思います。
そうなった時に```{ font-size: 62.5%; } ```という手法は**他の運用担当に通じるのか？** という懸念があります。

制作時に将来の事を見通せるわけがなく、後日「ああすればよかったなあ」という事はかなりあります。
また、ローンチする頃にはテクニックが陳腐化している場合もあります。
テクニックが**トリッキーであればあるほど陳腐化は早く、最悪のバッドプラクティス**になる可能性を孕んでいます。

この手法は**一見便利に見えますが、トリッキー**である事は否めません。

過去に、トリッキーなハックを使ってWebサイトを制作してきたからこその感想かもしれませんが、**安定運用を目指す以上、不安定な手法は排除したい**と思うのが普通でしょう。

**IEが消滅してブラウザのWeb標準化**が進んだ現在では、トリッキーなテクニックを使わずとも、Webサイトの制作ができるようになりました。
わざわざ**限界に挑戦**する必要もなくなったので、正攻法で制作を進めたいところです。


また、通じないと予感させる例があります。

**ユーザーが設定しているブラウザのフォントサイズが使えるよう、CSSのフォントサイズを相対指定する**というのが出発点のテクニックですが、時間が経過して陳腐化してしまったが故に、「**使っているけど意味があるかわからない**」という人も出てしまうわけです。

参考：[[css]html, bodyのfont-sizeはいくつにしてる？~よく見る62.5%ってなに!?~ | blog(スワブロ) | スワローインキュベート](https://swallow-incubate.com/archives/blog/20190617/)
参考：[【html】font-size:62.5%とすることに意味について、ご意見を伺いたいです。](https://teratail.com/questions/fosdh9wdkdov6h)

「呪文」とか「ブラウザの文字サイズ変更以外に使い道ない」とか言われちゃってます。

違う、そうじゃない:sunglasses:

https://www.youtube.com/watch?v=PmEpx-Ywr2w

## Blogの著者は2022年現在お勧めしていない
最初に持ってこいよ、という話です。
この記事の締めを書き出したら発見しちゃったんだから仕方ないじゃないか:rolling_eyes:

https://twitter.com/css/status/1523700789083996160?s=20&t=cbLVl86CUNwPaxJGvFN09A

たくさんのリプライがついてますが、なかなか興味深いです。

https://twitter.com/adactio/status/1523743519034200067?s=20&t=cbLVl86CUNwPaxJGvFN09A

> 彼(または他の誰か)が最近それを勧めているわけではありません!

Blogの著者も他の人もお勧めしているテクニックではないとw
ちなみにRichard Rutter氏のアカウントはこちら。最近はマストドンを楽しんでいるご様子ですw

https://twitter.com/clagnut/status/1604792176973578242?s=20&t=kV6OClbcdq2AoCo4tUUk1Q


リプライで多く見かけるのは「**デフォルトのフォントサイズはいじらないで**」というものです。
まあ、当然といえば当然。

# それでも html { font-size: 62.5%; } テクニックを使いたい
**お勧めしません。というかやめた方がいい**です。

**Blogの著者であるRichard Rutter氏だって今はお勧めしていない**のですから、バットプラクティスとまではいかなくても、それに近い立ち位置にあると思います。

だいたい、このBlogの記事自体20年近く前のものです。現在は環境が変わっています。

それでも使いたい！というチャレンジャーの方は、こちらの記事を参考にしてはいかがでしょうか？

[The 62.5% Font Size Trick in 2022 (+Infographic) - toheeb.com](https://www.toheeb.com/on/62.5-font-size-trick/)

ただ、こちらの著者[Toheeb Ogunbiyi](https://twitter.com/ToheebDotCom)氏も**推奨はしていません**し、[Richard Rutter](https://twitter.com/clagnut)氏も**別のものを推奨している**と記述しています。
> Well, some think it's pointless, archaic, and breaks expectations. As such, it shouldn't be recommended. In fact, Richard Rutter who introduced it recommends something else now. 
>
> まあ、それは無意味で、時代遅れで、期待を裏切るものだと考える人もいます。そのため、推奨されるべきではありません。実際、それを紹介したRichard Rutter氏は、現在別のものを推奨しています。

実は、[Yahoo!ニュース](https://news.yahoo.co.jp/)にも、Toheeb Ogunbiyi氏が代替案としているCSSの設定に似た書き方[^似た書き方]を見つけたので、この記事をベースにしているのかもしれません。
[^似た書き方]: [Yahoo!ニュース](https://news.yahoo.co.jp/)は```--fontSize-px10: calc(1rem/1.6);```


# 参考URL
## html {font-size: 62.5%;} に関する記事
- [CSS Design: Size Matters – A List Apart](https://alistapart.com/article/sizematters/)
- [text sizing - up the garden path](http://www.thenoodleincident.com/tutorials/box_lesson/font/#screens)
- [How to size text using ems | Clagnut by Richard Rutter](https://clagnut.com/blog/348/)
- [accessibility - minimum font size - Gunlaug's homepages](https://www.gunlaug.no/contents/wd_1_03_04.html)
- [英語圏から学ぶ、body要素に対するfont-size指定方法のまとめ - Trans](https://trans.hatenablog.jp/entry/20070331/p1)
- [The 62.5% Font Size Trick in 2022 (+Infographic) - toheeb.com](https://www.toheeb.com/on/62.5-font-size-trick/)
- [html に font-size: 62.5%; を指定するのはやめよう | Cherry Pie Web](https://www.cherrypieweb.com/4353)
- [font-sizeのremとは？正しい使い方と間違った使い方 | JAJAAAN](https://jajaaan.co.jp/css/font-size-rem/)
- [[CSS]ユーザビリティを考慮したフォントサイズの書き方 | いまからむったーん](https://muttaan.com/fontsize-usability/)
 
## CSS
- [font-size - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/font-size)
- [CSSで変数（カスタムプロパティ）を使ってみよう | Webクリエイターボックス](https://www.webcreatorbox.com/tech/css-variables)

## デザイン
- [8の倍数ルールでデザインする理由とメリット・デメリット | Blog | Yuya Kinoshita](https://yuyakinoshita.com/blog/2019/02/10/design-by-multiple-of-8/)
- [8の倍数と奇数のデザイン、8の倍数の方が圧倒的に便利だった件 | うぇぶスタ](https://web-study.blog/blog/gx6d8in24)
- [【サイト検証】 8の倍数ってまだ現役？｜shima / CAデザイナー｜note](https://note.com/unique_box/n/nd94d844f9d13)

## スマホにおける画面解像度
- [The Ultimate Guide To iPhone Resolutions](https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions)
- [Google Pixel のハードウェア技術仕様 - Google Pixel ヘルプ](https://support.google.com/pixelphone/answer/7158570?hl=ja#zippy=%2Cpixel)
- [ビューポートから考えるサイト仕様のうんぬん｜Blog｜株式会社COLSIS（コルシス）](https://colsis.jp/blog/smartphone-viewport/)

## アーカイブ検索ほか
- [Internet Archive: Digital Library of Free & Borrowable Books, Movies, Music & Wayback Machine](https://archive.org/)
- [ブラウザ戦争 - Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E6%88%A6%E4%BA%89)
- [20年以上にわたるWebブラウザーのシェア推移を可視化したムービーが面白い - やじうまの杜 - 窓の杜](https://forest.watch.impress.co.jp/docs/serial/yajiuma/1205144.html)
- [【IE6】サポート終了、お世話になったバグを振り返ってみる](https://bashalog.c-brains.jp/14/04/11-115200.php)
- [IE 6とIE 7のためのCSSハック16選（1/3） - ＠IT](https://atmarkit.itmedia.co.jp/fwcr/design/benkyo/csshack02/01.html)