よく見かける縁取り文字のデザインを知りたいです

Question

Qiita や Zenn の技術記事などで、アプリの使い方を説明する際によく見かける、ピンク色の文字に白い縁取りがついたデザインがあります。

最近、ある記事でもまさに同じようなスタイルを見かけて、「この文字デザインはどのように作られているのか」が気になっています。

下記のデザインです。

もしご存じの方がいらっしゃれば、情報を共有いただけると大変助かります。
どうぞよろしくお願いいたします！

Answer 1

CSSでやるならこんな感じです。
paint-order が Chrome で実装されるので、HTML+CSSで縁取り文字 #CSS - Qiita

---

Illustrator ならこの記事は参考になるかもしれません。
【Illustrator】文字を加工する（縁取り文字） ［アピアランス・効果］｜ イラストレーターを本格的に学ぶ(文字編）（step1）｜ nepo.blog ｜

---

何らかのツールを使うのであれば、スクリーンキャプチャアプリにはそういう機能がついていることが多いです。
Screenpressoで画像編集。「テキストボックス」を使いこなす！ - 『７回目の出直し🌻』

Comments

[pratica]

Screenpresso がまさに探していたものでした！
キャプチャ後の画像編集でテキストを追加する際、テンプレートの「2番」がちょうど求めていた縁取りデザインそのもので、とても助かりました。説明資料にもそのまま使いやすいです。

CSS や Illustrator についての情報も参考になりました。ご丁寧にありがとうございました！

Answer 2

映像で処理したいならAviUtlでしたらタイムラインに「オブジェクトの追加」でテキストレイヤーを追加し、設定ウィンドウで「標準文字」を「縁取り文字」に変更すると縁取り付きのテロップ（字幕）が入れられます