Typography demo

Graham S · November 7, 2021

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.