タイポグラフィー

ロゴタイプと合わせた Futura PT Cond Bold フォント

OP ロゴタイプは Futura PT Cond Bold をベースにつくられました。もしも、OP ロゴタイプの見た目と合わせたいタイポグラフィを作成したい場合は、そちらを利用するとよいでしょう。

また、Adobe 製のソフトウェアを利用してロゴタイプを作成する際には、Adobe Fonts サービスにおいて Futura PT Cond Bold フォントが提供されているので、そちらを利用することも可能です。

Web 上のフォント

現在、CIP Web サイトや OP Web extension において、特定の Web フォントの指定は行っておりません。これは、Web フォントの読み込みによるパフォーマンスの低下、また、それによるトラブルやメンテナンス性の低下を避けるためです。

ただ、ブランドの統一化のために、将来的には Web フォントの導入を検討する可能性があります。

利用方法

より具体的な利用方法はTailwind CSS のフォントサイズを参照してください。Web サイトや Web アプリケーションにおける Originator Profile で使用しているテキストスタイルの実装に関しては、Tailwind CSS のタイポグラフィーをベースに定義しています。

基本となるフォントサイズ

Web サイトや OP Web extension において、原則的には以下のフォントサイズを使用します。

下記の例では、1.25rem のフォントサイズを実現したいときに、 text-xl を指定している例です。可能な限り、これらのフォントサイズを使用することで、見た目やソースコードの一貫性を保ちます。

<p class="text-xl">
  OP技術は、もっと安全なインターネットとの付き合い方を提供します。
</p>

text-xsfont-size: 0.75rem; line-height: 1rem;
OP技術は、もっと安全なインターネットとの付き合い方を提供します。
text-smfont-size: 0.875rem; line-height: 1.25rem;
OP技術は、もっと安全なインターネットとの付き合い方を提供します。
text-basefont-size: 1rem; line-height: 1.5rem;
OP技術は、もっと安全なインターネットとの付き合い方を提供します。
text-lgfont-size: 1.125rem; line-height: 1.75rem;
OP技術は、もっと安全なインターネットとの付き合い方を提供します。
text-xlfont-size: 1.25rem; line-height: 1.75rem;
OP技術は、もっと安全なインターネットとの付き合い方を提供します。
text-2xlfont-size: 1.5rem; line-height: 2rem;
OP技術は、もっと安全なインターネットとの付き合い方を提供します。
text-3xlfont-size: 1.875rem; line-height: 2.25rem;
OP技術は、もっと安全なインターネットとの付き合い方を提供します。
text-4xlfont-size: 2.25rem; line-height: 2.5rem;
OP技術は、もっと安全なインターネットとの付き合い方を提供します。
text-5xlfont-size: 3rem; line-height: 1;
OP技術は、もっと安全なインターネットとの付き合い方を提供します。
text-6xlfont-size: 3.75rem; line-height: 1;
OP技術は、もっと安全なインターネットとの付き合い方を提供します。
text-7xlfont-size: 4.5rem; line-height: 1;
OP技術は、もっと安全なインターネットとの付き合い方を提供します。
text-8xlfont-size: 6rem; line-height: 1;
OP技術は、もっと安全なインターネットとの付き合い方を提供します。
text-9xlfont-size: 8rem; line-height: 1;
OP技術は、もっと安全なインターネットとの付き合い方を提供します。