Improved Typograph and more information...
…about the typefaces
This commit is contained in:
Moritz »mo.« Sauer
parent
aa7140cd83
commit
42485cf860
3 changed files with 132 additions and 114 deletions
|
|
@ -27,57 +27,66 @@ categories:
|
|||
|
||||
<div class="medium-8 medium-pull-4 columns" markdown="1">
|
||||
|
||||
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.
|
||||
## About Lato – A Sans Serif Typeface Family
|
||||
|
||||
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.
|
||||
[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.
|
||||
|
||||
> <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>
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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]
|
||||
|
||||
|
||||
## Second <h2>-Heading
|
||||
## About Volkhov <h2>
|
||||
|
||||
> Sirloin tenderloin swine frankfurter pork loin pork capicola ham hock strip steak ribeye beef ribs. Hamburger t-bone ribeye ham prosciutto bresaola.
|
||||
Volkhov is a low-contrast seriffed typeface with a robust character, intended for providing a motivating reading experience. Volkhov was designed by Ivan Petrov.
|
||||
|
||||
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.
|
||||
### Feeling Responsive uses Volkhov for... <h3>
|
||||
|
||||
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.
|
||||
* <h1>-headings
|
||||
* <h2>-headings
|
||||
* <h3>-headings
|
||||
* <h4>-headings
|
||||
* <h5>-headings
|
||||
* <h6>-headings
|
||||
|
||||
|
||||
#### Heading in Volkhov <h4>
|
||||
|
||||
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.
|
||||
|
||||
#### Heading in Volkhov <h5>
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
### Third <h3>-Heading
|
||||
## Modular Scale
|
||||
|
||||
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.
|
||||
*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*.
|
||||
|
||||
* Some Bulletpoints
|
||||
* Some Bulletpoints
|
||||
* Some Bulletpoints
|
||||
* Some Bulletpoints
|
||||
* Some Bulletpoints
|
||||
44px @ 1:1.5 – Ideal text size
|
||||
16px @ 1:1.5 – Important number
|
||||
|
||||
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.
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
#### Forth <h4>-Heading
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
|
||||
#### Fifth <h5>-Heading
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
Modular Scale | | |
|
||||
---------- | ----------- | -----
|
||||
44.000 | 1 | 2.75 | 338.462
|
||||
36.000 | 0.818 | 2.25 | 276.923
|
||||
29.333 | 0.667 | 1.833 | 225.638
|
||||
24.000 | 0.545 | 1.5 | 184.615
|
||||
19.555 | 0.444 | 1.222 | 150.423
|
||||
16.000 | 0.364 | 1 | 123.077
|
||||
|
||||
|
||||
|
||||
## Typographical Elements
|
||||
{: .t60 }
|
||||
|
||||
Here you'll find the [complete list of HTML5-Tags][1] and this is how they look like.
|
||||
|
||||
|
||||
### <hr> Horizontal Line
|
||||
<hr>
|
||||
|
||||
|
|
@ -259,15 +268,29 @@ Need a break? I give you three!<br><br><br>
|
|||
|
||||
[1]: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list
|
||||
[2]: http://phlow.de/
|
||||
[3]: #
|
||||
[4]: #
|
||||
[5]: #
|
||||
[6]: #
|
||||
[7]: #
|
||||
[3]: http://en.wikipedia.org/wiki/Ed_Benguiat
|
||||
[4]: https://www.google.com/fonts/specimen/Lato
|
||||
[5]: https://www.google.com/fonts/specimen/Volkhov
|
||||
[6]: http://www.latofonts.com/
|
||||
[7]: http://modularscale.com/
|
||||
[8]: #
|
||||
[9]: #
|
||||
[10]: #
|
||||
|
||||
|
||||
# <h1>-Heading in Volkhov
|
||||
|
||||
## <h2>-Heading in Volkhov
|
||||
|
||||
### <h3>-Heading in Volkhov
|
||||
|
||||
#### <h4>-Heading in Volkhov
|
||||
|
||||
##### <h5>-Heading in Volkhov
|
||||
|
||||
##### <h6>-Heading in Volkhov
|
||||
|
||||
|
||||
## Tables
|
||||
|
||||
Even tables are responsive thanks to foundation. A table can consist of these elements.
|
||||
|
|
|
|||
Reference in a new issue