Let's talk typography.

That is, how the fonts you pick influence the perception of your experience.

Some background history

I have a background in math. As such, I had to hand in my assignments typed in a markup language called LaTeX.

LaTeX is a superset of another typesetting system called TeX, but with a focus on math. Since then I can relate to

kerning comic on XKCD

Then I broke into web development.

I developed the expectation on myself to be able to handle all aspects to it. Not mastering it, but know enough to get a product shipped or talk with professionals in their area.

As such, I've learned some lessons in design. It is hard to tell, what makes a good design, but there are some criteria on how to spot bad ones. I know try to apply my lessons peu a peu on this web presence of mine.

My values shape my personal brand

Before starting about design, another discussion has to happen (ideally).

What do you stand for? What do you want people to think about you? What puts you apart from the masses?

I consider myself as Mathematician first and Software Engineer next. I stress the engineer over other terms like Programmer, Coder or Developer. Why? Because an engineer is someone who not just implement what someone else came up with. She is someone who chimes in in the planning phase and contributes to the solution early on.

As Mathematician I think very rational. I'm focussed on logic. Also, since math is not only a nature science but also an art… That means, there is some sense of elegance in it. Intuition.

Shapes: Square-cut

You will likely notice many straight lines and a grid background which reminds on a math sheet. I based that on Lea Verou's Blueprint pattern.

You might have noticed that weird sharps in the right hand side. I tried to mimic the corners of a ring binder here.

I also tried to move the navigation to the side. But it is not compatible with my current markup. For smaller viewports, another approach is needed. Most likely the navigation would turn to the bottom.

Looking at that one, what would fit has to have sharp corners. Those got a bit out of fashion in the design industry lately. But I consider it to help me stand out :-)

Where I'm not happy with yet are the … boxes you might see in some places. On the one hand I want to have small chunks of content showing up in a grid. On the other hand, a border is too in-your-face. I originally thought about „sticky notes“ design. Doesn't fit either.

What will likely show up more are ribbons. I have some things in mind with them. But I need to deemphasize the colour.

Colours: Dark grey meets orange

The main colour is a dark grey. As accent I picked something completely different: a warm orange!

That colour causes a cozy feeling to me. I feel accepted with all my quirks. It reminds me on animals I like also: squirrels, (fire)foxes or falcons.

Type: Milonga and Vollkorn

So with colour covered, I turned to pick a type. There are several places, but (sadly) Google Fonts is the only one, which allows me to enter arbitrary text and see it setted in that type. So I looked for features like

  • How good can I differentiate between uppercase o and 0 (zero)?
  • How good can I differentiate between uppercase i and lowercase L? (called glyphs)
  • Is there a special treatment of certain character combinations like „tt“? (called ligatures)
  • Are Old-Style-Numerals („hanging numbers”) supported?
  • How do different styles (italic, bold etc) look like?
  • Are the zeroes slashed or dotted?
  • How does an ampersand look like?
  • What license is attached?

Applying these criterias, the list of results shrinked quickly. In the end I settled with Vollkorn and Milonga.

Vollkorn is my bread font-face used for the most of text. It's categorised as serif one. I declared to use Helvetica as a fallback. If you look around, you'll notice I enjoy writing. A lot. So I need something which makes reading enjoyable.

Milonga is a bit … different. Normally you go for a serif and a sans-serif font. Milonga is categorised as a cursive one. But I like it. It has a bit of handwriting.

If you look for a font, research a bit of its history. Here is Milonga's.

Milonga is a Font inspired on “tangueros” art. This is a tribute to the “rioplatense” culture, so colored, full of love and hate, family, friends and enemies stories told in countless Tangos and Milongas (folk music genre from Argentina). This graceful, flowing and rhythmic font is formed by graphic elements found in a kind of classic painting from this area called “fileteado porteño”; with terminations involving petals, round and pointy details.

Milonga is useful for headlines, where the characteristics of the font are highlighted.

I looked at how it would look like for body text. Too many details. But it shines as a headline, doesn't it?

Let's take a look at Vollkorn:

Vollkorn came into being as my first type designing attempt. I published the Regular in 2005 under a Creative-Commons-License. Until the counter finally collapsed two years later it had been downloaded thousands of times and used for web and print matters. It intends to be a quiet, modest and well working text face for bread and butter use. Unlike its examples in the book faces from the renaissance until today, it has dark and meaty serifs and a bouncing and healthy look. It might be used as body type as well as for headlines or titles. »Vollkorn« (pronounced »Follkorn«) is German for »wholemeal« which refers to the old term »Brotschrift«. It stood for the small fonts for every day use in hand setting times.

For checking the paring, I'm using Fontjoy's projector, which displays them in a sphere.

If you want to learn more, check out these resources:

Information Architecture and Sitemap

This whole website was shifted around several times over the course of the past months. I think by now I have found a site structure, where the current parts find a natural place. But there are ideas (like going more into IndieWeb) which will demand some place.

Also, once I can upgrade the underlying engine, some more features will become enabled. Like breadcrumbs. Until then, I stick to POSH.

Interactivity

These days, you will notice more and more Web Apps, which rely on JavaScript to work. Static Site Generator sites follow another philosophy. But that doesn't mean, it can't get interactive or even personalised!

Right now, there's a light touch of JavaScript in a few corners. I plan to use Vue for more self-directed personalisation. Because I don't need to kbow about it ;-) (Although there will be ways to share usage with me if you want).

Conclusion

Uff. Thanks for reading this far. I hope you can agree, that design is harder than it looks like. There's so much to consider. One part at a time.