Figmaの「Demibold（デミボールド）」スタイルとは？

Figmaでフォントを選択していると、スタイルの中に「Demibold」という表記が出てくることがあります。

これはフォントの太さ（ウェイト）を表すスタイル名の一つです。

Demiboldの意味

Demiboldは、日本語では「やや太字」という意味です。

通常のフォントは、太さがいくつかの段階に分かれています。代表的なものは次のような順番です。

Thin

Light

Regular

Medium

Semibold（Demibold）

Bold

Extra Bold

この中でDemiboldは、

Regular（標準）より太く

Bold（太字）よりは少し細い

という位置にあるフォントウェイトです。

つまり、

「普通の文字だと少し弱いけど、Boldだと強すぎる」

というときに使われる太さです。

Semiboldとの違い

フォントによっては「Semibold」と表示される場合もあります。

実は、SemiboldとDemiboldはほぼ同じ意味で使われることが多く、

どちらもだいたい font-weight: 600 に対応しています。

そのため、

Figma：Demibold

CSS：font-weight: 600

という対応になるケースが一般的です。

コーディングするときの注意

FigmaでDemiboldと書かれているからといって、必ずしも600とは限りません。

フォントによっては、

Medium（500）

Semibold（600）

Bold（700）

など、用意されているウェイトが違うことがあります。

そのため実装するときは、

・そのフォントがどのウェイトを持っているか

・Google Fontsなどで指定できるウェイト

を確認してから指定することが大切です。

まとめ

Demiboldとは、フォントの太さを表すスタイル名の一つです。

Regularより少し太く、Boldよりは細い

いわば「中間の太さ」にあたるウェイトです。

Web制作では、見出しや強調部分で使われることが多く、

CSSでは font-weight: 600 として指定されることが一般的です。

Figmaのデザインをコーディングする際は、

「Demibold＝600の可能性が高い」という理解をしておくとスムーズに実装できます。