Jump to content
Invisionary Themes & Design

Typography demo


Graham S
 Share

Recommended Posts

  • Administrators

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Normal Paragraph - Pizza ipsum dolor amet meatball garlic bbq sauce Chicago style pepperoni bbq rib chicken wing deep crust bianca. Deep crust extra sauce melted cheese, pan bacon thin crust steak philly steak pizza roll chicken wing. Bacon & tomato peppers black olives chicken and bacon hawaiian. Buffalo sauce deep crust pizza roll, chicken wing broccoli platter onions beef. Bianca mozzarella white pizza, bbq rib pesto sausage pepperoni.

Bold Text - Pizza ipsum dolor amet marinara anchovies ricotta pineapple pizza. Pepperoni garlic bbq string cheese spinach onions garlic sauce, mozzarella fresh tomatoes pan ricotta thin crust white pizza marinara.

Italics - NY style chicken and bacon mozzarella ricotta, meatball bacon & tomato platter peppers extra cheese pineapple hand tossed marinara sausage.

Underlined melted cheese string cheese garlic extra sauce, stuffed white garlic lasagna philly chicken meat lovers ricotta onions. Chicken wing red onions chicken wing mayo meatball pie sausage onions ranch personal extra cheese party.

Strike through -Pizza ipsum dolor amet parmesan bbq rib white pizza personal.

Quote

Quote

Pizza ipsum meatball stuffed deep crust hand tossed bbq sauce garlic parmesan green bell peppers philly chicken pesto large steak ham ricotta. Mozzarella stuffed chicken wing peppers pizza platter mushrooms marinara red onions extra cheese anchovies pineapple ricotta NY style meat lovers. Peppers mayo stuffed sausage sauteed onions, party burnt mouth anchovies beef extra cheese.


Code (HTML)

<html><p>Pizza Bacon & tomato pizza stuffed crust sausage, marinara chicken parmesan chicken and bacon onions bacon chicken wing stuffed black olives. Hand tossed meat lovers sausage, extra sauce large stuffed pie philly steak broccoli extra cheese. Mozzarella philly steak NY style stuffed, bbq large burnt mouth beef meatball. Pepperoni pizza roll philly chicken red onions, mayo white pizza white garlic string cheese deep crust hawaiian meat lovers pork bbq rib. Red onions meatball sausage philly chicken beef.</p>
<p>Deep crust party garlic sauce, mayo pepperoni NY style mozzarella lasagna spinach garlic parmesan onions large meatball sausage.</p></html>

 

Code (CSS)

/*!
  * Bootstrap v5.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vr {
  display: inline-block;
  align-self: stretch;
  width: 1px;
  min-height: 1em;
  background-color: currentColor;
  opacity: 0.25;
}

 

Code (JS)

/*!
  * Bootstrap v5.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@popperjs/core')) :
  typeof define === 'function' && define.amd ? define(['@popperjs/core'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.bootstrap = factory(global.Popper));
})(this, (function (Popper) { 'use strict';

  function _interopNamespace(e) {
    if (e && e.__esModule) return e;
    const n = Object.create(null);
    if (e) {
      for (const k in e) {
        if (k !== 'default') {
          const d = Object.getOwnPropertyDescriptor(e, k);
          Object.defineProperty(n, k, d.get ? d : {
            enumerable: true,
            get: () => e[k]
          });
        }
      }
    }
    n.default = e;
    return Object.freeze(n);
  }

  const Popper__namespace = /*#__PURE__*/_interopNamespace(Popper);

 

Code (PHP)

<?php echo 'Hello, World!'; ?>

 

Spoiler

Spoiler

Pizza ipsum dolor amet mozzarella thin crust veniam pepperoni. Ut fugiat ad bbq sauce lorem commodo esse peppers, adipisicing magna. Banana peppers consequat stuffed, garlic peppers philly steak party NY style ea elit. Bacon & tomato red onions in personal nostrud pizza roll. Eiusmod green bell peppers aute sed in.

Pork ut aliquip fresh tomatoes pepperoni melted cheese. Non melted cheese magna, in stuffed broccoli in mayo personal bbq rib pork meatball pineapple sunt extra cheese. Aliquip ut labore mushrooms ham proident enim thin crust pepperoni do broccoli ex. Fresh tomatoes pesto onions esse hawaiian platter aute cillum elit. Aliquip commodo green bell peppers excepteur ut veniam deep crust non cillum white garlic incididunt exercitation adipisicing black olives. Banana peppers in garlic sauce cupidatat platter, marinara veniam.


 

HTML Typography stress test

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, non, facere incidunt aut expedita esse quod unde eveniet tenetur veritatis voluptatum id deleniti similique enim praesentium earum reprehenderit quidem amet. Based on Yahoo's YUI test suite.

This document shows various HTML elements. We test whether the typography settings solves all their combinations

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, volutpat.

This is 2nd level heading bh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam no

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

This is 3rd level heading. Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

This is 4th level heading.Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

This is 5th level heading. Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

This is 6th level heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Basic block level elements

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

This holds an address. Block level, but without margin or padding because they're often stacked.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

This is paragraph inside small. Ut wisi enim zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

This is a div element. Lorem ipsum dolor sit amet, elit, sed diam nonummy nibh euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. (End of div.)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus maiores maxime, quod ab! Officiis, quidem incidunt. Reprehenderit perspiciatis, atque temporibus eveniet alias architecto voluptate numquam eligendi. Nulla totam, veritatis similique.

This is a block quotation containing a single paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

The following contains address information about the author, in an address element.

 

Horizontal rule hr follows:


Lists

This is a paragraph before an unnumbered list (ul). Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

  • One.
  • Two.
  • Three. Well, probably this list item should be longer. Note that for short items lists look better if they are compactly presented, whereas for long items, it would be better to have more vertical spacing between items.
  • Four. This is the last item in this list. Let us terminate the list now without making any more fuss about it.

This is a paragraph before a numbered list (ol). Note that the spacing between a paragraph and a list before or after that is hard to tune in a user style sheet. You can't guess which paragraphs are logically related to a list, e.g. as a "list header".

  1. One.
  2. Two.
  3. Three. Well, probably this list item should be longer. Note that if items are short, lists look better if they are compactly presented, whereas for long items, it would be better to have more vertical spacing between items.
  4. Four. This is the last item in this list. Let us terminate the list now without making any more fuss about it.
  5. Five
  6. Six
  7. Seven
  8. Eight
  9. Nine
  10. Ten
  11. Eleven

This is a paragraph before a definition list (dl). In principle, such a list should consist of terms and associated definitions. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Apple
is a fruit.
Banana
Is also a fruit.
Tomato
Is debatable. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
 
 
🦛 🐐 🦡 🦊 🦉 🦔

🐐 🦡 🦊 🦉 🦔 🦛

Text-level markup

  • CSS (an abbreviation; abbr markup used)
  • radar (an acronym; acronym markup used)
  • Origin of Species (a book title; cite markup used)
  • a[i] = b[i] + c[i); (computer code; code markup used)
  • an octet is an entity consisting of eight bits (dfn markup used for the term being defined)
  • this is very simple (em markup used for emphasizing a word)
  • type yes when prompted for an answer (kbd markup used for text indicating keyboard input)
  • Hello! (q markup used for quotation)
  • He said: She said Hello! (a quotation inside a quotation)
  • you may get the message Core dumped at times (samp markup used for sample output)
  • this is highlighted text (strong markup used)
  • text in monospace font (tt markup used)
  • the command cat filename displays the file specified by the filename (var markup used to indicate a word as a variable).
  • In order to test how subscripts and superscripts (sub and sup markup) work inside running text, we need some dummy text around constructs like x1 and H2O (where subscripts occur). So here is some fill so that you will (hopefully) see whether and how badly the subscripts and superscripts mess up vertical spacing between lines. Now superscripts: Mlle, 1st, and then some mathematical notations: ex, sin2 x, and some nested superscripts (exponents) too: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Some of the elements tested above are typically displayed in a monospace font, often using the same presentation for all of them. This tests whether that is the case on your browser:

  • This is sample text inside code markup
  • This is sample text inside kbd markup
  • This is sample text inside samp markup
  • This is sample text inside tt markup

Links

Tables

The following table has a caption. The first row and the first column contain table header cells only; other cells are data cells.

Caption: Sample table: Areas of the Nordic countries, in sq km
Country Total area Land area Population
Denmark 43,070 42,370 7,230,000
Finland 337,030 305,470 17,830,000
Iceland 103,000 100,250 5,230,000
Norway 324,220 307,860 18,200,000
Sweden 449,964 410,928 28,570,000

This next bit shows that PREformatted text is working.

1
 2
  3
   4
    5

Lorem ipsum dolor sit 360° amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. UNESCO duis autem vel eum iriure dolor in hendrerit 1591 in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla € 5000 facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Privacy Policy Terms of Use