Table of contents

101 #



Typography #

Typography

Typography is a wonderful world, hidden in plain sight. Here there are some resources for inspiration and study.A premise: I have a fetish for Typography. I really do. I often find myself tweaking font faces when instead I have much more important and urgent things to take care of, or I spend a long time watching super technical videos and documentaries on the history of design and visual representation of writing. I wonder how would it be if I chose it as my main interest, alto at a professional level. Nevertheless, I love it, and by checking the insights below, you might be struck by its power and beautiful effectiveness, too.



Fonts #

  • Smelvetica, a funny customization of Helvetica by Tim Holman.
  • Inter, a wonderful Open Font by Rasmus Andersson.
    Update 3rd December 2020: I will never stop loving Inter and using it everywhere
  • Merriweather, the serif font I use on this blog (not anymore), it’s designed by Eben Sorkin.
    Update 3rd December 2020: I’ve been deluded: like Playfair Display, it feels AWESOME at the beginning, it then gets itchy and bothering after a while.
  • Graphik, Sans Serif
  • Garamond is the most widely used and loved font in the italian publishing industry, and to me it’s the best serif font for narrative writing. EB Garamond is its renewed, open, digitally friendly alternative, and I use it when I want to use serif in my blog. Its designer is a great guy



Custom Font #

  • define a font name
  • cutting the leg of xs
  • sideways cutting of letter’s legs



Font subsetting #

In order to make pages load faster, there are ways to drastically reduce a font file size, by basically removing unused glyphs.

pyftsubset Inter.ttf \  --unicodes="U+0020-007F,U+00A0-00FF,U+2013-204A,U+2150-215F,U+2190-2199,U+21A9,U+21AF,U+2200,U+2203-2209,U+2211,U+221A,U+2325,U+232B,U+2318,U+237A,U+25E6" \  --layout-features="" \  --flavor="woff2" \  --output-file="inter.woff2"



Colors #

Colors

tommi.space #

tommi.space palette

  • #111 deep
  • #222 main background color
  • #555
  • #AAA
  • #E0E0E0 main text color
  • #FCC920 primary color
  • #3185FC
  • #EC0868 Razzmatazz
  • #D00 warning red
  • limegreen (#3185FC)
  • #20CE88 geek green


tommi.space Syntax Highlight #

This website’s code snippets use a custom made syntax highlight; its source is here.



Scambi #

The main colors of Scambi Festival’s website



pise-notes.club #

pise-notes.club’s theme colors. Source SCSS file.

The website is currently offline since our faculty supervisor asked me to close it.
  • #FFFFFF
  • #F3F7D9
  • #C8CBB2
  • #86BBD8
  • #86BBD822
  • #33658A
  • #F26419
  • #0000022
  • #00000099
  • #371350
  • #222222



quitsocialmedia.club #

quitsocialmedia.club palette

  • #F1FAEE
  • #A8DADC
  • #1D3557
  • #1D3557



Dark and green website #

Color scheme for Philosophy & Engineering blog.

  • #000
  • #444
  • #F3F3F3
  • #77CEAB
  • #20CE88
  • #2D8362
  • #F41C73
  • #CE2066



Red #

Ah, red, what a color. It is so wonderful I have to keep note of all the nice shades of it I lay my eye upon. Also, I have a great passion for red tending towards magenta.



Syntax highlight #

Monokai Pro inspired sintax highlight, which does not correspond to this website code snippets’ syntax

  • #2C292D
  • #FF1688
  • #FC9867
  • #FFD866
  • #A9DC76
  • #8DD8EF
  • #AB9DF2



Dark app palette #

MacOS dark theme system background colors. The accent colors can be found here.

  • #1E1E1E darker background for alternate rows
  • #292929 lighter background for alternate rows
  • #333
  • #656565 light gray for selection
  • #ED655A close
  • #FCC04C minimize
  • #72BE47 expand



Other palettes #



Various #

  • #451960
  • #F28F3B



Generators #

Color palettes generators



Web Design #

Stunning websites #



Brand identities #



Other #



Resources #

Free vectors, illustrations, logos and images

🏗 WIP section 🛠

This section should contain a beautifull graph displaying the relations among this note and all of the others on tommi.space. Unfortunately, showing it requires great coding skills and I am still working on it.

Share

Commenti