AKD Fonts

Paragraph text line length

Content lines should be about 3 or fewer alphabets wide for good readability
3 alphabets (about 700px on this site / font):
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

4 alphabets (about 935px on this site / font):
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
https://practicaltypography.com/line-length.html

Headings

Header one

Chunking is a concept that originates from the field of cognitive psychology. UX professionals can break their text and multimedia content into smaller chunks to help users process, understand, and remember it better.

Presenting content in chunks makes scanning easier for users and can improve their ability to comprehend and remember it. In practice, chunking is about creating meaningful, visually distinct content units that make sense in the context of the larger whole. Users appreciate chunked text content. It helps avoid walls of text, which can appear intimidating or time-consuming. Chunking enables easy skimming — users’ preferred method of reading online. Some of the most commonly used methods of chunking text content are:

  • Short paragraphs, with white space to separate them
  • Short text lines of text (around 50–75 characters)
  • Clear visual hierarchies with related items grouped together

Simply chunking your text isn’t enough — you also need to support scanning by making it easy to quickly identify the main points of the chunks. You can do this by including:

  • Headings and subheadings that clearly contrast with the rest of the text (bolder, larger, etc.)
  • Highlighted keywords (bold, italic, etc.)
  • Bulleted or numbered lists
  • A short summary paragraph for longer sections of text, such as articles

The key to effectively chunking multimedia content (text as well as images, graphics, videos, buttons, and other elements) is to keep related things close together and aligned (in accordance with the Law of Proximity in Gestalt psychology). Using background colors, horizontal rules, and white space can help users visually distinguish between what’s related and what isn’t.

The main idea of chunking is to divide information into clearly distinct groups of related content. If you want your users to retain more, pack information into meaningful chunks.

https://www.nngroup.com/articles/chunking/

Header two

When you’re deciding what content should go first on your website, ask yourself: if visitors only take away one thing from my site, what do I want them to know? This will likely be your most important content and should be ranked highest on your page. From there, think about all the information you want to include on this page and rank it from most important to least, while still keeping flow in mind. That is, make sure the content still makes sense in the order you’ve determined. https://www.locallogy.com/what-is-content-hierarchy

Header three

Improve the layout of your online forms by placing form labels near the associated text field and by grouping similar fields. This principle of placing related items closer to each other isn’t new; it’s actually the Law of Proximity from Gestalt psychology. Gestalt psychologists were concerned with how and why the brain perceives an object as a whole rather than as a sum of individual parts. They came up with a several laws explaining how people organize visual information; the Law of Proximity was one of these.

This is a shortcut our brain takes when processing visual information and is in fact another example of the Law of Proximity. Based on the same Gestalt principle, users might overlook other interface elements if they are placed too far from the object they act on.

Group together related fields: Long forms, with many fields, can feel overwhelming. Grouping related fields together helps users make sense of the information that they must fill in.

We recommend placing field labels above the corresponding text fields. Although this increases the form’s overall length, it makes the form easier to scan, because users can see the text field in the same fixation as the label. Top placement also allows for longer field labels, as horizontal space isn’t an issue.

If form length is a concern, you can place field labels to the left of the text fields. However, make sure that labels are of similar length and are placed as close to the text fields as possible. If the labels are too far to the left, it can be difficult to associate the correct label with its corresponding field.

Don’t be tempted to place the labels inside the text field as filler text. The label disappears when users input their text and they must remember it as they fill in the field. This especially causes an issue if users use the Tab key to move through a form. When they tab to the next field without looking, they will miss what information is required. Also, users are drawn to open text fields; they might mistake the filler text as a default answer and skip that form element.

https://www.nngroup.com/articles/form-design-white-space/

Header four

Group like content together: If you’ve got blog posts, they should be grouped together. Same with resource pages. Offerings and pricing pages should be closely linked. Keep your content organized so that it’s easy to flow through relevant – and related – information. A helpful tool for conceptualizing your website’s hierarchy is with a visual sitemap. It’s like a blueprint for your website to show how pages (and by extension, content,) are connected together. A well-constructed sitemap makes an effective website. Make sure your sitemap is clean, logical, and easy to navigate for your website visitors. Ibid.

Header five

Map your content to your sales funnel: Every visitor is going to have a set of goals based on where they are in the buying process. It’s important to recognize that, and to realize what sections of your site appeal to the different segments of your sales funnel: Information seekers and investigators at the top of your sales funnel may benefit from blog posts or mailing lists. Folks further down the sales funnel may be looking for a means to contact you, or pricing information, or even an e-commerce opportunity. Make sure that you know what segment of the sales funnel your content is targeting, and make sure it’s pointing them in the right direction to help meet their goals! Ibid.

Header six

The Internet often mimics the print world when print material is transferred to Web pages without much change in format or content. We believe that this direct transfer of material from one medium to another results in less than optimal reading mate-rials and a potential challenge for readers. One area of empirical research with consider-able information concerning print documents is that of“signaling.” Text signals consist of preview statements,overview sentences, headings, and other cues about the content and structure of a text. Empirical studies tell us that when readers who are “reading to learn” encounter signals in print text, they are better able to comprehend new or difficult information. These signals help readers create mental roadmaps or schemata of a text’s structure and content that in turn help them absorb new information.

It is vital to recognize that reading print versus online documents is not an identical experience, even when the text is identical and the online and print versions have similar layouts. Authors should understand that readers of print documents may be more resilient when dealing with maximal or minimal orientation cues because they can see an entire page at once and acquire a sense of document structure. When dealing with lengthy topics (that is, topics that require more than a few paragraphs), online readers can be at a disadvantage when it comes to orientation and schema building.

https://www.hcde.washington.edu/files/people/docs/HeadingsPrintOnline.pdf

Blockquotes

Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote with a cite reference:

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things.

Steve Jobs – Apple Worldwide Developers’ Conference, 1997

Tables

Employee Salary
John Doe $1 Because that’s all Steve Jobs needed for a salary.
Jane Doe $100K For all the blogging she does.
Fred Bloggs $100M Pictures are worth a thousand words, right? So Jane x 1,000.
Jane Bloggs $100B With hair like that?! Enough said…

Definition Lists

Definition List Title
Definition list division.
Startup
A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
#dowork
Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
Do It Live
I’ll let Bill O’Reilly will explain this one.

Unordered Lists (Nested)

  • List item one
    • List item one
      • List item one
      • List item two
      • List item three
      • List item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four

Ordered List (Nested)

  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

HTML Tags

These supported tags come from the WordPress.com code FAQ.

Address Tag

1 Infinite Loop
Cupertino, CA 95014
United States

Anchor Tag (aka. Link)

This is an example of a link.

Abbreviation Tag

The abbreviation srsly stands for “seriously”.

Acronym Tag (deprecated in HTML5)

The acronym ftw stands for “for the win”.

Big Tag (deprecated in HTML5)

These tests are a big deal, but this tag is no longer supported in HTML5.

Cite Tag

“Code is poetry.” —Automattic

Code Tag

You will learn later on in these tests that word-wrap: break-word; will be your best friend.

Delete Tag

This tag will let you strikeout text, but this tag is no longer supported in HTML5 (use the <strike> instead).

Emphasize Tag

The emphasize tag should italicize text.

Insert Tag

This tag should denote inserted text.

Keyboard Tag

This scarcely known tag emulates keyboard text, which is usually styled like the <code> tag.

Preformatted Tag

This tag styles large blocks of code.

.post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
	and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}

Quote Tag

Developers, developers, developers… –Steve Ballmer

Strike Tag (deprecated in HTML5)

This tag shows strike-through text

Strong Tag

This tag shows bold text.

Subscript Tag

Getting our science styling on with H2O, which should push the “2” down.

Superscript Tag

Still sticking with science and Isaac Newton’s E = MC2, which should lift the 2 up.

Teletype Tag (deprecated in HTML5)

This rarely used tag emulates teletype text, which is usually styled like the <code> tag.

Variable Tag

This allows you to denote variables.