Style Guide

Welcome to the viljamis.com style guide. This living and user editable style guide serves as a resource that helps to define a common visual language for the components of this website.

Colors

#ff7160
#000
#212121
#fff

Header

web

Headings

The Quick Brown Fox

The quick brown fox

The quick brown fox

The quick brown fox

The quick brown fox

Article Heading

The Many Faces of
The Web

Paragraphs

The history of typography dates back about 5,000 years. It starts from a series of pictograms, which then evolved to hieroglyphs in Egypt and later around 1,200BC to Phoenician alphabets. Almost 2,500 years later the Chinese invented first movable type which later revolutionized everything in the west when Gutenberg invented latin movable type.

Web typography, and digital typography in general, is a huge step forward in this history. It has made setting type fast and easy compared with hand-setting metal type. ❦

Quotes

Sizing type on the web is tricky because of the limited resolution involved. One pixel of font-size up or down can completely change how a typeface—and thus a whole text—looks. But once I found the size I liked, 18px, I had a number upon which to base my modular scale.”

Code

1
2
3
4
5
6
<html class="no-js">
<head>
  <script>
    document.documentElement.className = "js";
  </script>
……

Lists

  • The quick brown fox jumps over the lazy dog
  • The quick brown fox jumps over
  • The quick brown fox
  1. The quick brown fox jumps over the lazy dog
  2. The quick brown fox jumps over
  3. The quick brown fox

Tables

OS Works
Android 1.0–2.1 No
Android 2.2+ Yes
Blackberry 1.0–5.0 No
Blackberry 6.0+ Yes
Blackberry Tablet 1.0+ Yes

Read the article
Molten Leading on GitHub

Text Selection

All these contexts, where our web­sites are viewed in, vary so wildly that we have to start paying more attention to how we design and build. The web is fragile and the situation isn’t going to change any time soon.

Highlights

Universality is in the core of the World Wide Web, so we should embrace it and build websites that are available to, and accessible by, everyone.

Work

Pagination

Buttons

Share Button

Inputs

Punctuation

  • Don’t do: "It's a 'magic' sock"., do: “It’s a ‘magic’ sock.”
  • Don’t do: 1 x 0.5 - 0 = 1/2, do: 1 × 0.5 − 0 = ½
  • Don’t do: (c) 2015 Corp (TM), do: © 2015 Corp™
  • Don’t do: a typeface - and thus a whole text - looks, do: a typeface—and thus a whole text—looks
  • Don’t do: 1024x768, do: 1024×768
  • Don’t do: Steve Jobs is 6’ 10”, do: Steve Jobs is 6' 10"