はじめに 前提として本記事は特定のフォントを貶める意図はなく役割として使い分けることを推奨する記事です。 フォントにあるのは役割であり、優劣ではないということを念頭にご一読いただけると幸いです。 注意事項 メイリオという特殊なフォント まず具体的な問題点を挙げる前にメイリオというフォントについて軽く紹介させていただきます。 といってもWeb開発者にとっては馴染み深いフォントでありご存じの方が大半だと思います。 Windows Vistaより搭載されたこのフォントは未だに根強い人気があります。 記事にもあるように、このフォントは和文と英文の調和を重視して作られ英文のベースラインという考え方を取り込んでいます。 そこでメイリオでは和文を縦方向に95%に圧縮した形にして下部にスペースを開けた。こうすることで和文・欧文が混じったときに、それぞれのベースラインを合わせつつ、文字が上下に踊って見えると
![UIパーツにメイリオを指定しないほうがいい理由](https://cdn-ak-scissors.b.st-hatena.com/image/square/e746f2ad95bc075fb34d093ba8adce35bd9446a9/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--EWFMVKWs--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AUI%2525E3%252583%252591%2525E3%252583%2525BC%2525E3%252583%252584%2525E3%252581%2525AB%2525E3%252583%2525A1%2525E3%252582%2525A4%2525E3%252583%2525AA%2525E3%252582%2525AA%2525E3%252582%252592%2525E6%25258C%252587%2525E5%2525AE%25259A%2525E3%252581%252597%2525E3%252581%2525AA%2525E3%252581%252584%2525E3%252581%2525BB%2525E3%252581%252586%2525E3%252581%25258C%2525E3%252581%252584%2525E3%252581%252584%2525E7%252590%252586%2525E7%252594%2525B1%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aken7253%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzJmNDc1OTM1ZDUuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)