Foto by herlitz_pbs (https://www.flickr.com/photos/herlitzpbs/10800093004) released under CC-BY-ND 2.0 (https://creativecommons.org/licenses/by-nd/2.0/)

Styleguide
The Haute Couture of my website
5 min. read

This is a meta post that specifies the layout and design elements of my website. It is written in the style of a blog post and therefore also serves as a visual example for one.

Typography

The “input“ font face has a technical look goes nicely with this blog, whose topics cover coding and technology mainly. The fact that it comes with a whole bunch of different styles is a strong advantage, since typography is the most important stylistic device on text-heavy sites.

Logo

Even though I want to appear as person and not as a brand, I still want to create a visual identity that is supposed to be somewhat unique and recognisable. Therefore I use a logo along with my name, however, without a custom font. The logo is reminiscent of an icon for a person or user without looking generic.

The evolution of the logo is that I used my nickname “jotaen” as word mark back in the day, set in the “Jan LT” typeface:

Take the first two letters “jo”, rotate them by 90° and – with some further tweaks – you have my logo. (Credits for that idea go to my former coworker Charisse.)

Colours

A small variation of predefined colours can be used to give semantic meaning to certain elements like links, tags or buttons. They shouldn’t be used for mere stylistic purposes.

Text

Running text

A Paragraph is a block of running text. It is supposed to be between a couple and around a dozen of lines of text. The line-length is up to 80 characters at most, for optimal legibility. The space between two subsequent paragraphs is around 1½ times the line height.

In order to highlight a passage, text can be bold to indicate strong emphasis or it can be italic (or: obligue) for light emphasis. The italic style has a slightly thiner font-weight to stick out a bit more. Weblinks come in blue and underlined; visited websites are colored purple. (Unfortunately, the latter has come a bit out of fashion, but I consider it to be a very important feature – isn’t the web all about links?) There is inline code, which is monospaced on a light grey background. There is enough spacing so that two code pieces in subsequent lines don’t collide. All text selection is in the same colour as the header bar. Try it out!

Headlines

H1 is a break to divide the text into multiple chapters: it is rather thin in font weight, but it is generously surrounded by whitespace to make it sufficiently prominent. H2 is a sub-division within a chapter (with some extra whitespace), wheres H3 is associated with its subsequent paragraph (with no extra whitespace). Other headline levels are not in use.

H3 headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt1 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.

Definitory lists

Some term:

This is a definition of “some term”.

Another term:

This is another definition. As you can see, the explanation text can also be longer, which means that the text floats around the definition

One last item:

And here is yet another item. It’s the last one, however.

Block elements

These are block elements, which are supported by markdown.

Table2

Rank First Sentence Book Title Author
1 Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Die Verwandlung Franz Kafka
2 Stately, plump Buck Mulligan came from the stairhead, bearing a bowl of lather on which a mirror and a razor lay crossed. Ulysses James Joyce
3 In principio era il Verbo e il Verbo era presso Dio, e il Verbo era Dio. Il Nome Della Rosa Umberto Eco
4 It was a bright, cold day in April, and the clocks were striking thirteen. 1984 George Orwell
5 In der Mottengasse elf, oben unter dem Dach hinter dem siebten Balken in dem Haus, wo der alte Eisenbahnsignalvorsteher Herr Gleisenagel wohnt, steht eine sehr geheimnisvolle Kiste. Lari Fari Mogelzahn Janosch

Code

# Returns a personalized salutation string
def greet(name)
  return "Hey, #{name}! How are you doing?"
end

puts greet("Mary")

3

List

  1. Ordered list
  2. Another list item
  3. Third list item

Image

A climber abseils from a very exposed summit needle4

Images can also come in different proportions: small or large. (The above is regular.)

A climber abseils from a very exposed summit needle

Blockquote

The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother’s keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who attempt to poison and destroy my brothers. And you will know my name is the Lord when I lay my vengeance upon thee.5


  1. Footnote for a piece of text within a paragraph [return]
  2. Footnote for a headline. Remember that due to technical limitations, there can’t be footnotes within tables. [return]
  3. Footnote for a code block, here a piece of Ruby code [return]
  4. Footnote for an image, here a fashion show [return]
  5. Footnote for a blockquote, here a citation from the movie Pulp Fiction (Ezekiel 25,17) [return]