UP | HOME
RSS | Source | License

Blog Re-layout

Table of Contents

End

(Open in new tab to see enlarged image)

before-desktop.png

↑ before

↓ after

after-desktop.png

☞ More comparison

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.

Middle

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;
}

...

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.

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;
}

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

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

Last modified on 2020-09-12 Sat 16:10

Send your comment to archive.casouri.cat@gmail.com