Blog/post3.html at main · amad00/Blog · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Cormorant Typeface</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,500,700|Muli:400,500,700&display=swap"
        rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>

<body>
    <header>
        <h1><a href="index.html">Ama's Blog</a></h1>
        <nav id="mainnav">
            <ul>
                <li><a href="#">Archives</a>
                    <ul class="submenu">
                        <li><a href="post1.html">01. History </a></li>
                        <li><a href="post2.html">02. Semantic</a></li>
                        <li><a href="post3.html">03. Typeface</a></li>
                        <li><a href="post4.html">04. Web vs App </a></li>
                        <li><a href="post5.html">05. Core Model</a></li>
                        <li><a href="post6.html">06. Web Design</a></li>
                    </ul>
                </li>
            </ul>

        </nav>
    </header>

    <section class="blog">
        <nav>
            <ul>
                <li><a href="post2.html"><i class="fas fa-chevron-left"></i> Semantic HTML</a></li>
                <li><a href="post4.html">Mobile and Desktop Design <i class="fas fa-chevron-right"></i></a></li>
            </ul>
        </nav>


        <article class="blogpost">
            <h2>Cormorant Typeface</h2>
            <time datetime="2020-02-13">February 13th, 2020</time>
            <img src="images/typeface.jpg" alt="wooden letters">
            <p>Cormorant was hand drawn and designed by Christian Thalmann of Catharsis Fonts. Cormorant was inspired by
                the Garamond typeface. Even with this inspiration, Thalmann did not use Garamond or any other font as a
                starting point when he created Cormorant. Coromant was designed as a display text. The family has five
                different versions. Cormorant is the standard version. The other four are: Cormorant Garamond which is
                more suitable as a text face, Cormorant Infant, Cormorant Unicase which mixes lowercase and uppercase
                forms, and Cormorant Upright is an italic design that sits upright rather than at an angle. Each version
                is available in a range of weights.
            </p>
            <img src="images/cormorant.png" alt="cormorant styles" width="500">
            <aside>
                <p>A fun fact about the Cormorant typeface is that it is named after an aquatic bird.
                </p>
            </aside>
            <img src="images/wilderness.png" alt="wilderness" width="500">
            <p>The website <a href="https://readwildness.com/reviews/normal-people">wilderness </a>uses Cormorant as its
                primary font. I think that it is used effectively. The
                website is very open and free. The font size and line height allows the website to convey this theme.
                It’s not very hard to read large amounts of text. I can easily read the headers and subheaders the font,
                with its large size. </p>
            <img src="images/sasha1.png" alt="sasha ng" width="500">
            <img src="images/sasha2.png" alt="sasha ng" width="300">
            <p><a href="http://sasha-ng.com/">Sasha Ng’s</a> website also used Cormorant typeface. It is used as a
                secondary font. I think that it is used effectively. It pairs well with the second, primary font and
                distinguishes them
                from one another.
            </p>
            <p>I really like the Cormorant typeface. It is simple and clean, but still has style. I find that I like it
                best when used as a header or subheader. When it’s font size is increased, the style of it is enhanced
                more so than when it is the size of paragraph font. In the website, wilderness, on every page my eyes
                were instantly drawn to the titles.

            </p>
            <p>I think it’s personality is regal and sharp; it is meant to stand tall and command attention. This is
                particularly true in its uppercase form. It is elegant.

            </p>
        </article>
    </section>
    <footer>
        <p>Ama Dadzie</p>
        <p>Contact: <a
                href="mailto:&#097;&#115;&#100;&#097;&#100;&#122;&#105;&#101;&#064;&#117;&#099;&#100;&#097;&#118;&#105;&#115;&#046;&#101;&#100;&#117;">&#097;&#115;&#100;&#097;&#100;&#122;&#105;&#101;&#064;&#117;&#099;&#100;&#097;&#118;&#105;&#115;&#046;&#101;&#100;&#117;</a>
        </p>
        <p><a href="http://validator.w3.org/check?uri=referer">Valid HTML5</a></p>
    </footer>
</body>

</html>