Skip to content

Commit 42485cf

Browse files
author
Moritz »mo.« Sauer
committed
Improved Typograph and more information...
…about the typefaces
1 parent aa7140c commit 42485cf

3 files changed

Lines changed: 119 additions & 101 deletions

File tree

_posts/design/2014-09-16-typography.md

Lines changed: 51 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -27,57 +27,66 @@ categories:
2727

2828
<div class="medium-8 medium-pull-4 columns" markdown="1">
2929

30-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
30+
## About Lato – A Sans Serif Typeface Family
3131

32-
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.
32+
[Lato][4] is a sans serif typeface family started in the summer of 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the Open Font License by his foundry tyPoland, with support from Google.
3333

34+
> <span class="teaser">I do not think of type as something that should be readable. It should be beautiful.</span><cite>[Ed Benguiat][3]</cite>
3435
35-
## Second &lt;h2&gt;-Heading
36+
In the last ten or so years, during which Łukasz has been designing type, most of his projects were rooted in a particular design task that he needed to solve. With Lato, it was no different. Originally, the family was conceived as a set of corporate fonts for a large client — who in the end decided to go in different stylistic direction, so the family became available for a public release.
3637

37-
> Sirloin tenderloin swine frankfurter pork loin pork capicola ham hock strip steak ribeye beef ribs. Hamburger t-bone ribeye ham prosciutto bresaola.
38+
When working on Lato, Łukasz tried to carefully balance some potentially conflicting priorities. He wanted to create a typeface that would seem quite “transparent” when used in body text but would display some original traits when used in larger sizes. He used classical proportions (particularly visible in the uppercase) to give the letterforms familiar harmony and elegance. At the same time, he created a sleek sans serif look, which makes evident the fact that Lato was designed in 2010 — even though it does not follow any current trend.
3839

39-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
40+
The semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness. “Male and female, serious but friendly. With the feeling of the Summer,” says Łukasz. Learn more at [www.latofonts.com][6]
4041

41-
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.
4242

43+
## About Volkhov &lt;h2&gt;
4344

45+
Volkhov is a low-contrast seriffed typeface with a robust character, intended for providing a motivating reading experience. Volkhov was designed by Ivan Petrov.
4446

45-
### Third &lt;h3&gt;-Heading
47+
### Feeling Responsive uses Volkhov for... &lt;h3&gt;
4648

47-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
49+
* &lt;h1&gt;-headings
50+
* &lt;h2&gt;-headings
51+
* &lt;h3&gt;-headings
52+
* &lt;h4&gt;-headings
53+
* &lt;h5&gt;-headings
54+
* &lt;h6&gt;-headings
4855

49-
* Some Bulletpoints
50-
* Some Bulletpoints
51-
* Some Bulletpoints
52-
* Some Bulletpoints
53-
* Some Bulletpoints
5456

55-
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.
57+
#### Heading in Volkhov &lt;h4&gt;
5658

59+
As a four-weight family it is well-suited for complex text environments being economic and legible, contemporary and prominent. Many of its design solutions relate to this purpose: large open counters, rather short descenders, and brutal asymmetric serifs.
5760

58-
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.
61+
#### Heading in Volkhov &lt;h5&gt;
5962

63+
Spacing in Bold is slightly increased compared to the normal weight, because the bold mass is mostly grown inwards. The Italic has a steep angle and a distinctive calligraphically reminiscent character, as a counterpart to the rigorous Regular.
6064

61-
#### Forth &lt;h4&gt;-Heading
6265

63-
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.
6466

65-
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.
67+
## Modular Scale
6668

69+
*Feeling Responsive* explores the *2:3 perfect fifth* modular scale created with [www.modular-scale.com][7]. This is the modular scale of *Feeling Responsive*.
6770

68-
#### Fifth &lt;h5&gt;-Heading
71+
44px @ 1:1.5 – Ideal text size
72+
16px @ 1:1.5 – Important number
6973

70-
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.
71-
72-
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.
74+
Modular Scale | | |
75+
---------- | ----------- | -----
76+
44.000 | 1 | 2.75 | 338.462
77+
36.000 | 0.818 | 2.25 | 276.923
78+
29.333 | 0.667 | 1.833 | 225.638
79+
24.000 | 0.545 | 1.5 | 184.615
80+
19.555 | 0.444 | 1.222 | 150.423
81+
16.000 | 0.364 | 1 | 123.077
7382

7483

7584

7685
## Typographical Elements
86+
{: .t60 }
7787

7888
Here you'll find the [complete list of HTML5-Tags][1] and this is how they look like.
7989

80-
8190
### &lt;hr&gt; Horizontal Line
8291
<hr>
8392

@@ -259,15 +268,29 @@ Need a break? I give you three!<br><br><br>
259268

260269
[1]: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list
261270
[2]: http://phlow.de/
262-
[3]: #
263-
[4]: #
264-
[5]: #
265-
[6]: #
266-
[7]: #
271+
[3]: http://en.wikipedia.org/wiki/Ed_Benguiat
272+
[4]: https://www.google.com/fonts/specimen/Lato
273+
[5]: https://www.google.com/fonts/specimen/Volkhov
274+
[6]: http://www.latofonts.com/
275+
[7]: http://modularscale.com/
267276
[8]: #
268277
[9]: #
269278
[10]: #
270279

280+
281+
# &lt;h1&gt;-Heading in Volkhov
282+
283+
## &lt;h2&gt;-Heading in Volkhov
284+
285+
### &lt;h3&gt;-Heading in Volkhov
286+
287+
#### &lt;h4&gt;-Heading in Volkhov
288+
289+
##### &lt;h5&gt;-Heading in Volkhov
290+
291+
##### &lt;h6&gt;-Heading in Volkhov
292+
293+
271294
## Tables
272295

273296
Even tables are responsive thanks to foundation. A table can consist of these elements.

0 commit comments

Comments
 (0)