スクリーンショット
PC1 / PC2 / PC（拡大）
スマートフォン / スマートフォン(Android) / スマートフォン(iPhone)
フィーチャーフォン / フィーチャーフォン2

▼罫線
　罫線は見出しや水平線などにも使えます。

（インライン要素:span）
実線のライン
<span class="solid">実線のライン</span>
ドットのライン
<span class="dotted">ドットのライン</span>
破線のライン
<span class="dashed">破線のライン</span>
二重線のライン
<span class="double">二重線のライン</span>

（ブロックレベル要素:div）
<div class="solid">実線のライン</div>
<div class="dotted">ドットのライン</div>
<div class="dashed">破線のライン</div>
<div class="double">二重線のライン</div>

▼文字寄せ（ブロックレベル要素:div）
<div class="left">左寄せ</div>
<div class="center">中央寄せ</div>
<div class="right">右寄せ</div>

　見出しは、フィーチャーフォンでは文字サイズや余白はいずれも変わりません。
　PCとスマートフォンのみ、div使用時とspan使用時で余白と文字の大きさが少し変わります。
　Webフォント適用でフォント自体が小さめに表示されるのと、普通のままだと上下のバランスが悪くなるので、拡大設定と上の余白を広めに設定。見た目上はバランスが良くなっているはずです。
　フォントは半角英数字だと『Josefin Slab』というWebフォントが表示され、日本語だとヒラギノ明朝W3（MacOS、iOS）、 游明朝（windowsOS8.1↑） 、MS明朝（windowsOS8.0↓）が表示されます。
　ちなみにAndroidの日本語は、私の使っている機種だとゴシック体の太字になるだけでした。明朝フォントが入っていないのでゴシックは分かりますがなぜ太字…。
　MS明朝はウェイト（太さ）が細いので文字が結構がたつきます。アンリエイリアスのかかったHGS明朝Eにしようかと思ったんですが今度はウェイトが太すぎて不恰好だったので結局このままです。

▼ブロックレベル<div>で使用 <div class="midashi1">文字列</div>
<div class="midashi2">文字列</div>
<div class="midashi3">文字列</div>

▼インライン<span>で使用
テキストＡｂCd
<span class="midashi1">文字列</span>
テキストＡｂCd
<span class="midashi2">文字列</span>
テキストＡｂCd
<span class="midashi3">文字列</span>

　参考になるかは分かりませんが、色々と試してみた履歴で一応残しておきます。
　＃は全角ですので、実際に使う場合は半角に変換して下さい。
見出しテキスト
<span class="dotted">＃sozai1002_w＃ 見出しテキスト</span>
見出しテキスト
<span class="dotted">＃sozai1001_w＃ 見出しテキスト</span>
見出しテキスト
<span class="solid">＃sozai502_w＃ 見出しテキスト</span>
見出しテキスト
<span class="solid">＃sozai505_w＃ 見出しテキスト</span>
見出しテキスト
<span class="dotted">＃sozai1558_w＃ 見出しテキスト</span>
見出しテキスト
<span class="dotted">＃sozai680_w＃ 見出しテキスト</span> (Back-HOME)