要するに、創る人は等幅フォント（固定ピッチフォント）で見てもらえるような工夫をすることが重要で、また見る人は等幅フォントで見てあげることが重要なのであります。
見る人的には、ブラウザで適切なフォント設定をしておきましょう。
ネスケ４であれば、「編集」→「設定」→「表示」→「フォント」で、等幅のフォントを設定しましょう。たとえばＭＳ明朝とかＭＳゴシックを設定すると良いでしょう。
そういう方法が分からない場合、等幅フォントで表示してくれるエディタ等（メモ帳など）へコピー＆ペースとしてから見てあげましょう。
で、創る人（特にｈｔｍｌで）の方ですが、出来る限り等幅フォントで観てもらえるような工夫を凝らすことと、プロポーショナルフォントで観られたときに形の崩れが最小限に抑えられるようにする工夫を凝らすことが重要となります。
まずは、等幅フォントで観てもらえるような工夫ですが、ブラウザが等幅フォントで出力するようなタグを使えばよいのです。
ネスケ２、３の頃はフォントサイズを３以外にすればかなり高い確率で等幅フォントが自動的に選択されていたのですが、ＩＥやネコミ４ではこれでは等幅フォントになりません。
まずはプレフォーマッティングタグ<PRE>とタイプライターテキストタグ<TT>の利用です。これを使うと、各ブラウザで設定されている等幅フォントで表示されるようになります。
しかしながら、見ている人の各ブラウザの等幅フォントの設定が正しくされていない場合も、多かったりします。そういう場合の対応も出来るようにするには、強制的にフォントを指定してしまう方法があります。
例えば等幅フォントのＭＳゴシック体を強制的に使わせるには<FONT FACE="ＭＳ ゴシック">とすればオッケー。ただ、相手の端末が指定したフォントを使えるとは限らないのが難点。
例えば、これらを何も使わない場合、<TT>を使う場合、フォントを指定した場合をそれぞれ以下に示します。
まず、なにも指定しない場合
｡｡ ｡｡ ｡｡
(−) (ｏ) (〇)
ｍ()ｍ ｍ()ｍ ｍ()ｍ
<PRE>のみの指定の場合。
｡｡ ｡｡ ｡｡
(−) (ｏ) (〇)
ｍ()ｍ ｍ()ｍ ｍ()ｍ
<PRE>と<TT>を指定した場合。
｡｡ ｡｡ ｡｡
(−) (ｏ) (〇)
ｍ()ｍ ｍ()ｍ ｍ()ｍ
<PRE>とＭＳゴシックを指定した場合。
｡｡ ｡｡ ｡｡
(−) (ｏ) (〇)
ｍ()ｍ ｍ()ｍ ｍ()ｍ
そして、最後にプロポーショナルフォントで観られても形を崩れにくくする方法を説明します。
テキスト絵は暗に全角文字は正方形、半角文字は幅がその半分、と言うことを想定しています。
だから、特に半角文字のＩやｌや空白などは、想定している幅からのずれが大きくなります。そして、多用した場合、そのずれは右側へ行くほど蓄積されて大きくなります。
つまり、想定している幅からずれる文字は使わないということと、小さいものはなるべく画面の左側に描くことがポイントです。
特に空白が続く部分は全角の空白を使いましょう。
とりあえず、私が知っていることはこんなところです。
何かもっと良い情報がありましたら、ぜひお知らせください。