em

emは、タイポグラフィやウェブデザインにおいて非常に重要な相対的な単位です。固定的な数値ではなく、現在使用しているフォントのサイズに基づいた可変的な単位であるため、画面サイズやユーザーの設定に合わせてレイアウトを柔軟に調整できるのが最大の特徴です。

相対単位としての利点

px（ピクセル）のような絶対的な単位とは異なり、emを使用すると、フォントサイズを変更した際に、それに関連付けられた余白や幅も自動的に比例して変化します。これにより、デザインの視覚的なバランスを維持したまま、全体のスケールを変更することが可能です。例えば、文字サイズを大きくした際に、文字間のスペースや行間が狭く感じられるといった問題を避けることができます。

remとの使い分け

現代のウェブ制作では、emとrem（ルートエム）の使い分けが重要になります。

em: その要素自身のフォントサイズに基づきます。入れ子構造になっている場合、親要素のサイズが累積的に適用されるため、計算が複雑になることがあります。
rem: ルート要素（通常はhtmlタグ）のフォントサイズに基づきます。どこで使っても基準が一定であるため、一貫したサイズ管理がしやすい傾向にあります。

基本的には、コンポーネント内部でフォントサイズに連動させたい部分にはemを使い、ページ全体の統一感を出すための余白やサイズ指定にはremを使うのが一般的です。