UP | HOME
RSS | Source | License

Blog Re-layout

Table of Contents

1 End

(Open in new tab to see enlarged image)

before-desktop.png

↑ before

↓ after

after-desktop.png

☞ More comparison

2 Beginning

I found a really interesting and informative online book about typography: Practical Typography. The book talks about how to use symbols, fonts, page layout, and much more.

As professional writers and publishers for our own writing, it is important for me and you to make typography of our document right1. I recommend you to read through it. The book is short, and the writer made it a fun read.

3 Middle

3.1 Hyper links

Initially I use underline on hyperlinks, but in the underlineing chapter of the book, the author suggests to shift away from underline links.

My first attempt is to go to apple.com and copy what they do with hyperlinks: no underline except when mouse hovers on it and with blue color. It has a little problem: Apple.com is much more colorful than my blog; using color for links is fine for them, but the blue links stand out a bit too much for me.

The book itself uses small caps for links. I hated it when reading the book. Because I'm not a native English speaker, small caps is hard for me to read and reading them is uncomfortable. So I'm definitely not using that.

Then I tried bold. However, Baskerville(the font I was using) has a super thick bold. Bold links stand out even more than blue links and are much harder to read.

Now it seems I need a font with more weight options. I went out and installed Source Serif Pro, one of the free fonts that the book approves.

Turns out the semi bold didn't work for me, either. But semi light did.

Until this point I'm still undecided between blue and semi light. For now I uses semi light (as you might see, if I didn't change it).

Here is my configuration on links:

:link, :visited {
    color: black;
    font-weight: 200;
    text-decoration: none;
}

3.2 Font

My font setup:

@font-face {
    font-family: "Source Serif Pro";
    src: url("./misc/SourceSerifPro-Black.otf");
    font-weight: 900;
}
@font-face {
    font-family: "Source Serif Pro";
    src: url("./misc/SourceSerifPro-BlackIt.otf");
    font-weight: 900;
    font-style: italic;
}

...

3.3 Readability

I shortened the line length, increased font size and line spacing. Now there are fewer information (words) per page but it is much more readable.

3.4 Headers

I removed the bold type on all headers and shrinked their font size. I also added more blank above each header.

h1, h2, h3, h4, h5, h6, dt {
    font-family: Courier, Monospace;
    font-weight: normal;
}

h2, h3, h4, h5, h6 {
    margin-top: 40pt;
}

h1 {
    font-size: 28pt;
    margin-bottom: 40pt;
}

h2 {
    font-size: 17pt;
}

h3 {
    font-size: 16.5pt;
}

h4, h5, h6 {
    font-size: 16pt;
}

UPDATE <2018-12-05 Wed>:

I changed the header font to Montserrat and increases headings' font size a bit:

h1, h2, h3, h4, h5, h6, dt {
    font-family: "Montserrat", Courier, Monospace;
    font-weight: normal;
}

h2, h3, h4, h5, h6 {
    margin-top: 40pt;
}

div#table-of-contents h2 {
    margin-top: 25px;
}

h1 {
    font-size: 28pt;
    margin-bottom: 40pt;
}

h2 {
    font-size: 20pt;
}

h3 {
    font-size: 18pt;
}

h4, h5, h6 {
    font-size: 17pt;
}

3.5 Mobile and tablet

I also added support for tablets. Now tablets have noticeable margins like desktop does. I also added a little bit margin for mobile.

Check out more comparison for tablet and mobile.

/* desktop, tablet landscape */
@media screen and (min-width: 1025px) {
    /* floating TOC */
    #table-of-contents  {
        font-size: 14pt;
        bottom: 0;
        position: fixed;
        overflow-y: scroll;
        overflow-x: wrap;
        top: 5%;
        left: 2%;
        width: 20%;
    }
    body {
        margin-left: 30%;
        margin-right: 20%;
        width: 50%;
    }
}

/* tablet, protrait */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    body {
        margin-left: 20%;
        margin-right: 10%;
        font-size: 14pt;
    }
}

/* mobile */
@media screen and (max-width: 767px) {
    body {
        font-size: 14pt;
        margin-left: 7%;
        margin-right: 7%;
    }
}

Footnotes:

1

IMO, “right” means the document is pleasing to read and effective in displaying messages.

Written by Yuan Fu <casouri@gmail.com>

First Published on 2018-11-17 Sat 00:00

Last modified on 2018-12-05 Wed 02:47