patternlibrary/typography.php at main · nsgov/patternlibrary · 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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<?php
	$title = 'Typography';
	include 'inc/header.php';
	include 'inc/breadcrumb.php';
?>

<h1><?php echo "$title"; ?></h1>

<p>
    Our online typeface is <a href="https://fonts.google.com/specimen/Open+Sans">Open Sans</a>.
    <br />
    CSS font stack: <span class="code">font-family: "open_sansregular", Helvetica, Arial, Tahoma, sans-serif</span>
</p>
<p>
    In data tables, we often use a monospace font for numerical figures.
    <br />
    CSS font stack: <span class="code">Menlo, Monaco, Consolas, "Courier New", monospace</span>
</p>

<h2>Font sizes</h2>

<table class="table">
    <thead>
        <tr>
            <th>
                Style
            </th>
            <th>
                Size
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <h1>Heading 1</h1>
            </td>
            <td>
                2.25em/36px
            </td>
        </tr>
        <tr>
            <td>
                <h2>Heading 2</h2>
            </td>
            <td>
                1.7em/27.2px
            </td>
        </tr>
        <tr>
            <td>
                <h3>Heading 3</h3>
            </td>
            <td>
                1.35em/21.6px
            </td>
        </tr>
        <tr>
            <td>
                <h4>Heading 4</h4>
            </td>
            <td>
                1.15em/18.4px
            </td>
        </tr>
        <tr>
            <td>
                <p>
                    Paragraph text
                </p>
            </td>
            <td>
                1em/16px
            </td>
        </tr>
        <tr>
            <td>
                <small>Small</small>
            </td>
            <td>
                0.875em/14px
            </td>
        </tr>
    </tbody>
</table>


<p>For information about writing online, please refer to the <a href="https://novascotia.sharepoint.com/sites/Projects/CNSGovWebStrategy/Tools%20and%20Guides/Forms/AllItems.aspx?id=%2Fsites%2FProjects%2FCNSGovWebStrategy%2FTools%20and%20Guides%2FOnline%20Writing%20Guide%20v2%2Epdf&parent=%2Fsites%2FProjects%2FCNSGovWebStrategy%2FTools%20and%20Guides">online writing guide (PDF)</a>.</p>

<!-- TYPOGRAPHY -->

<?php
$typographys = array();
$handle=opendir('typography');
while (false !== ($typography = readdir($handle))):
    if(stristr($typography,'.html')):
        $typographys[] = $typography;
    endif;
endwhile;
sort($typographys);

?>
<h2 class="section">Typographic patterns</h2>
<?php
foreach ($typographys as $typography):
    echo '<div class="pattern">';
    echo '<div class="display">';
    include('typography/'.$typography);
    echo '</div>';
    echo '<div class="source">';
    echo '<textarea rows="6" cols="30">';
    echo htmlspecialchars(file_get_contents('typography/'.$typography));
    echo '</textarea>';
    echo '<p><a href="typography/'.$typography.'">'.$typography.'</a></p>';
    echo '</div>';
    echo '</div>';
    echo '<div class="pattern-separator"></div>';
endforeach;
?>


<?php
	include 'inc/footer.php';
?>