{"id":271,"date":"2026-10-13T06:21:15","date_gmt":"2026-10-13T06:21:15","guid":{"rendered":"http:\/\/www.scmgalaxy.com\/tutorials\/2010\/07\/14\/website-typography\/"},"modified":"2026-10-13T06:21:15","modified_gmt":"2026-10-13T06:21:15","slug":"website-typography","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/website-typography\/","title":{"rendered":"WordPress Typography Patterns: Styled Lists, Notice Boxes, and Code Blocks with Reusable CSS"},"content":{"rendered":"\n

If you manage documentation or blog content in WordPress, consistent typography for lists, notice boxes, and code snippets makes pages easier to scan, maintain, and standardize across teams. This revision turns the original class-based examples into clear, reusable patterns with modern CSS and editor-friendly HTML.<\/p>\n\n\n\n

Originally published on 2010-07-14; fully revised and updated.<\/em><\/p>\n\n\n\n

Original reference: Website Typography<\/a>.<\/p>\n\n\n\n

\"website-typography\"<\/figure>\n\n\n\n

What the original post demonstrates<\/h2>\n\n\n\n

The original article is a short style demo showing custom list marker classes (.arrow1<\/code>, .arrow2<\/code>, .circle<\/code>), notice box classes (.alert<\/code>, .info<\/code>, .download<\/code>), and a CSS code snippet. The core idea is still useful: define a small set of reusable typography classes so authors can keep content visually consistent.<\/p>\n\n\n\n

Implement custom list marker styles with maintainable CSS<\/h2>\n\n\n\n

Instead of deeply nested lists and theme-specific hacks, use semantic lists with explicit classes. This keeps markup cleaner and simplifies future design changes.<\/p>\n\n\n\n

CSS for arrow and circle variants<\/h3>\n\n\n
.list-arrow-1<\/span>,\n.list-arrow-2<\/span>,\n.list-circle<\/span> {\n  margin<\/span>: 0<\/span>;\n  padding-left<\/span>: 0<\/span>;\n  list-style<\/span>: none;\n}\n\n.list-arrow-1<\/span> li<\/span>,\n.list-arrow-2<\/span> li<\/span>,\n.list-circle<\/span> li<\/span> {\n  position<\/span>: relative;\n  padding-left<\/span>: 1.4rem<\/span>;\n  margin<\/span>: 0.35rem<\/span> 0<\/span>;\n}\n\n.list-arrow-1<\/span> li<\/span>::before<\/span> {\n  content<\/span>: '\u279c'<\/span>;\n  position<\/span>: absolute;\n  left<\/span>: 0<\/span>;\n}\n\n.list-arrow-2<\/span> li<\/span>::before<\/span> {\n  content<\/span>: '\u27a4'<\/span>;\n  position<\/span>: absolute;\n  left<\/span>: 0<\/span>;\n}\n\n.list-circle<\/span> li<\/span>::before<\/span> {\n  content<\/span>: '\u25cf'<\/span>;\n  position<\/span>: absolute;\n  left<\/span>: 0<\/span>;\n  font-size<\/span>: 0.75rem<\/span>;\n  top<\/span>: 0.32rem<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Example HTML markup<\/h3>\n\n\n
<ul<\/span> class<\/span>='list-arrow-1'<\/span>><\/span>\n  <li<\/span>><\/span>First item with arrow marker<\/li<\/span>><\/span>\n  <li<\/span>><\/span>Second item with arrow marker<\/li<\/span>><\/span>\n<\/ul<\/span>><\/span>\n\n<ul<\/span> class<\/span>='list-arrow-2'<\/span>><\/span>\n  <li<\/span>><\/span>Alternative arrow style<\/li<\/span>><\/span>\n<\/ul<\/span>><\/span>\n\n<ul<\/span> class<\/span>='list-circle'<\/span>><\/span>\n  <li<\/span>><\/span>Circular marker style<\/li<\/span>><\/span>\n<\/ul<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Create reusable notice boxes for alert, info, and download messages<\/h2>\n\n\n\n
The original post uses inline <span><\/code> classes. For better spacing and readability, block-level notice components are usually easier to manage.<\/p>\n\n\n
.notice<\/span> {\n  border-left<\/span>: 4px<\/span> solid #6b7280<\/span>;\n  padding<\/span>: 0.75rem<\/span> 1rem<\/span>;\n  margin<\/span>: 1rem<\/span> 0<\/span>;\n  border-radius<\/span>: 4px<\/span>;\n  background<\/span>: #f9fafb<\/span>;\n}\n\n.notice<\/span>.alert<\/span> {\n  border-left-color<\/span>: #dc2626<\/span>;\n  background<\/span>: #fef2f2<\/span>;\n}\n\n.notice<\/span>.info<\/span> {\n  border-left-color<\/span>: #2563eb<\/span>;\n  background<\/span>: #eff6ff<\/span>;\n}\n\n.notice<\/span>.download<\/span> {\n  border-left-color<\/span>: #059669<\/span>;\n  background<\/span>: #ecfdf5<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n
<div<\/span> class<\/span>='notice alert'<\/span>><\/span>\n  <strong<\/span>><\/span>Alert:<\/strong<\/span>><\/span> This action affects production settings.\n<\/div<\/span>><\/span>\n\n<div<\/span> class<\/span>='notice info'<\/span>><\/span>\n  <strong<\/span>><\/span>Info:<\/strong<\/span>><\/span> This section explains optional configuration.\n<\/div<\/span>><\/span>\n\n<div<\/span> class<\/span>='notice download'<\/span>><\/span>\n  <strong<\/span>><\/span>Download:<\/strong<\/span>><\/span> Get the latest build artifact from the release page.\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Workflow for rolling out typography classes in WordPress<\/h2>\n\n\n\n
\nflowchart TD\n    A[Define content components] --> B[Create shared CSS classes]\n    B --> C[Apply classes in WordPress editor]\n    C --> D[Preview on desktop and mobile]\n    D --> E{Readable and accessible}\n    E -- no --> B\n    E -- yes --> F[Publish and reuse pattern]\n<\/pre>\n\n\n\n
Legacy class approach vs modern reusable pattern<\/h2>\n\n\n\n
Approach<\/th>Markup style<\/th>Pros<\/th>Trade-offs<\/th><\/tr><\/thead>
Legacy theme classes (for example .arrow1, .alert)<\/td>Theme-specific class names in content<\/td>Quick to apply in one theme<\/td>Harder to migrate or standardize<\/td><\/tr>
Reusable semantic classes (for example .list-arrow-1, .notice.info)<\/td>Simple lists and block containers<\/td>Cleaner structure and easier maintenance<\/td>Requires shared CSS conventions<\/td><\/tr>
Default browser markers and minimal styling<\/td>No custom classes<\/td>Fast and robust baseline<\/td>Limited visual differentiation<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Legacy CSS snippet from the original post<\/h2>\n\n\n\n
The original article included the following CSS example:<\/p>\n\n\n
#subheader<\/span> h1<\/span> {\n  float<\/span>: left;\n  margin-top<\/span>: 28px<\/span>;\n  background<\/span>: url<\/span>(..\/images\/logo.gif) no-repeat;\n  width<\/span>: 335px<\/span>;\n  height<\/span>: 58px<\/span>;\n  text-indent<\/span>: -9999px<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Best practices<\/h2>\n\n\n\n
  • Keep content markup semantic, and use classes only for intentional variants.<\/li>
  • Centralize typography classes in one stylesheet so editors do not rely on inline formatting.<\/li>
  • Prefer reusable notice components over one-off colored paragraphs.<\/li>
  • Test list markers and notice contrast for readability on mobile and dark\/light themes.<\/li>
  • Document approved classes in your editorial or engineering style guide.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"
    This guide modernizes a legacy WordPress typography post into practical, reusable patterns for custom list markers, callout boxes, and code styling. It focuses on maintainable CSS and editor-friendly markup you can reuse across posts and documentation pages.<\/p>\n","protected":false},"author":1,"featured_media":4453,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[2],"tags":[4333,1003,4335,4329,1122,4334,4331,4332,213,4326,4328,894,4327,4330],"class_list":["post-271","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorised","tag-alert-box","tag-code","tag-download-box","tag-examples-of-typography","tag-guide","tag-info-box","tag-list-with-arrows","tag-list-with-circle","tag-tutorial","tag-typography","tag-web-typography","tag-website","tag-website-typography","tag-website-typography-reference"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=271"}],"version-history":[{"count":3,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/271\/revisions"}],"predecessor-version":[{"id":79099,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/271\/revisions\/79099"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media\/4453"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}