Typography

Updated: November 1, 2024

Expires: Sunday August 14th, 2033 1:11pm

Used for checking FTP!

Colors

Links & Buttons

Need mobile versions!

Links

Regular links that are used inline with text should be bold. That way they’ll stick out.

Telephone Links

555-555-5555 Local phone call.

555-555-5555 ext. 555 Phone call, wait, then extension.

555-555-5555 A text message.

555-555-5555 Text message, with a preloaded message.

Email Links

Email addresses are obfuscated on this website and are safe to display on pages.

rznvy@rznvy.pbz Email, autopop with email address.

Email link Multiple emails in To:

Email link Email, autopop with recipients, subject, and body text.

Buttons

All links can be made into buttons using css code: class=”styleName”

Button

External Link Button…

Download Button

Placeholder Button

Small Button

Small Button

Home page buttons

Home Page Use

Home Page Use

Tables Best Practice

Using Dreamweaver + CSS toolset, then c/p into Text in page builder makes the best tables currently.

No Borders	<table border=”0″ cellpadding=”8″ style=”margin: 1em 0em 1em 0em;”>
With Borders	<table border=”1″ cellpadding=”8″ style=”margin: 1em 0em 1em 0em;”>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum efficitur nibh sed blandit. Sed eu erat gravida, sagittis nibh nec, viverra nisi. Integer consectetur in lorem in blandit. Mauris fringilla dui et sagittis venenatis. Duis porttitor risus id lorem fringilla tempus. Pellentesque non aliquet erat. Phasellus semper venenatis leo, ac egestas est feugiat eu. Vestibulum sed velit augue. Vivamus vulputate molestie nibh.

Typography Examples

Emergency Management Truck

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum efficitur nibh sed blandit. Sed eu erat gravida, sagittis nibh nec, viverra nisi. Integer consectetur in lorem in blandit.

Jump Link Lists

• Add class=”arrows” to the <ul> tag
• Looks like this <ul class=”arrows”>
• Lorem ipsum dolor sit amet…
• Lorem ipsum dolor sit amet…

• Add class=”arrowsl” to the <ul> tag
• Looks like this <ul class=”arrowsl”>
• Lorem ipsum dolor sit amet…
• Lorem ipsum dolor sit amet…

Nested Lists

Unordered lists automatically use proper bullets.
Ordered lists need to have explicit formatting set in code.

• Mauris fringilla dui et sagittis venenatis.
  • Duis porttitor risus id lorem fringilla tempus.
    • Pellentesque non aliquet erat.

Ordered List, Unformatted

1. Phasellus semper venenatis leo, ac egestas est feugiat eu.
   1. Vestibulum sed velit augue.
      1. Vivamus vulputate molestie nibh.

Ordered List, Formatted

Ordered list elements

1. Phasellus semper venenatis leo, ac egestas est feugiat eu.
   1. Vestibulum sed velit augue.
      1. Vivamus vulputate molestie nibh.

Drop Down

These are a very new feature. Still needs work. Arrows only display in Safari.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum efficitur nibh sed blandit. Sed eu erat gravida, sagittis nibh nec, viverra nisi. Integer consectetur in lorem in blandit. Mauris fringilla dui et sagittis venenatis. Duis porttitor risus id lorem fringilla tempus. Pellentesque non aliquet erat. Phasellus semper venenatis leo, ac egestas est feugiat eu. Vestibulum sed velit augue. Vivamus vulputate molestie nibh.

Heading 3

Lorem ipsum dolor sit amet…

Heading 4

Lorem ipsum dolor sit amet…

Heading 5

Lorem ipsum dolor sit amet…

Heading 6

Lorem ipsum dolor sit amet…

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Blockquote and some div styling does this.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet…

Lorem ipsum dolor sit amet…

Lorem ipsum dolor sit amet…

Shortcodes

WordPress shortcodes. Click Text to view code.