Skip to content

A readability-focused CSS typography framework with strong vertical rhythm.

Notifications You must be signed in to change notification settings

bjza/PrettyHowType

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
    <title>Pretty How Type: A CSS Typography Kit</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">    
	<link rel="stylesheet" href="prettyhowtype.css" type="text/css"/>
	<link rel="stylesheet" href="prettyhowtype.tables.css" type="text/css"/><
/head>
<body>

<article style="max-width:36em; margin: 0 auto;">
    <h1>Pretty How Type: A CSS Typography Kit</h1>
    <h2>Version v0.5 // 20130517</h2>
    <p>Pretty How Type is a readability-focused CSS typography framework in sans-serif with strong vertical rhythm. It was built with mobile and single-column layouts in mind and is comparable to popular apps and plugins to increase article readability on mobile devices.</p>

    <p>Pretty How Type's heading typeface is Montserrat, a free display font developed by <a href="http://www.zkysky.com.ar/">Julieta Ulanovsky</a>. There are known issues with non-local fonts on some browser/OS combinations (like Chrome/Windows). Where this is a concern, I recommend falling back onto Verdana (the body typeface).</p>

    <p>Pretty How Type uses a font-size of 16px and a line height of 24px, but it resizes well for accessibility.</p>

    <p>Feedback and suggestions are always welcome: <a href="mailto:[email protected]">[email protected]</a>.</p>

    <h2>Usage</h2>
    <p>The current release includes</p>
    <ul>
        <li>Consistent formatting for <em>ul</em>, <em>ol</em>, <em>dl</em>, <em>blockquote</em>, and <em>code</em>.</li>
        <li>Auto-shrinking for embedded media within article tags.</li>
        <li>Support for figure, figcaption.</li>
        <li>Forms following the accessibility guidelines <a href="http://alistapart.com/article/prettyaccessibleforms">here</a>.</li>
        <li>A set of formatting classes such as alignleft, alignright, aligncenter, .nodecoration.
.pullquote</li>
    </ul>
    
    <h3>Examples</h3>

    <p>Ordered list.</p>
    <ol>
        <li>Lorem ipsum</li>
        <li>dolor sit amet</li>
        <li>consectetur adipisicing elit</li>
    </ol>

    <p>Blockquote:</p>
    <blockquote>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.</blockquote>

    <div class="pullquote">A short pull quote.</div>
    <p>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.</p>

    <p>Preformatted code:</p>
    <code>pre, code { 
    font-family: monospace;
}</code>

    <p>HTML5's <em>figure</em> and <em>figcaption</em> elements:</p>
    <figure>
        <img src="images/leafs.jpg">
        <figcaption>The caption.</figcaption>
    </figure>

    <p>HTML5's <em>dl</em> and its internal elements:</p>
    <dl>
        <dt>dl</dt>
            <dd>Defines a definition list.</dd>
        <dt>dt</dt>
            <dd>Defines a term (an item) in a definition list.</dd>
        <dt>dd</dt>
            <dd>Defines a description of an item in a definition list. Here is more text to demonstrate how wrapping works on a dl item.</dd>
    </dl>

    <h4>Forms</h4>
    <form>

        <fieldset>
            <legend>Text Inputs</legend>
            <ol>
                <li>
                    <label>Text</label>
                    <input type="text" />
                </li>
                <li>
                    <label>Textarea</label>
                    <textarea></textarea>
                </li>
                <li>
                    <label>File</label>
                    <input type="file" />
                </li>
            </ol>
        </fieldset>

        <fieldset>
            <legend>Button Inputs</legend>
            <ol>
                <li>
                    <fieldset>
                        <legend>Radio below?</legend>
                         <label><input type="radio" name="skub" />Skub</label>
                         <label><input type="radio" name="skub" />Anti-Skub</label>
                    </fieldset>
                </li>
                <li>
                    <fieldset>
                        <legend>Checkboxxx?</legend>
                        <label><input type="checkbox" />Yes</label>
                        <label><input type="checkbox" />No</label>
                        <label><input type="checkbox" />Maybe So</label>
                    </fieldset>
                <li>
            </ol>
        </fieldset>

        <input type="submit">
        
    </form>

    <h4>Tables</h4>
    <table>
        <tr>
            <th>One</th>
            <th>Two</th>
            <th>Three</th>
        </tr>
        <tr>
            <td>Red</td>
            <td>Blue</td>
            <td>Green</td>
        </tr>        
        <tr>
            <td>Plain</td>
            <td>Star</td>
            <td>Ballybaloo</td>
        </tr>        
        <tr>
            <td>5</td>
            <td>23</td>
            <td>42,000</td>
        </tr>        
        <tr>
            <td>1,000,000</td>
            <td>6</td>
            <td>3.25698</td>
        </tr>     
    </table>

    <h3>Download</h3>
    <p>Pretty How Type is available on <a href="https://github.com/bjza/PrettyHowType.git">GitHub</a>.</p>

    <p>You can access the CSS in the wild <a href="http://dallyingautomata.com/shared/PrettyHowType/prettyhowtype.css">here</a>. Minified <a href="http://dallyingautomata.com/shared/PrettyHowType/prettyhowtype.min.css">here</a>.</p>

    <p>Feel free to @import <a href="http://dallyingautomata.com/shared/PrettyHowType/prettyhowtype.css">the live version</a> into your CSS, but be forewarned that I will not announce minor updates for the time being. Version controlled updates will appear on GitHub.</p>

    <p>If you desire strict baseline vertical spacing and embedded media are a major component of the design, I recommend using <a href="http://daneden.me/baseline/">baseline.js</a> to resize elements.</p>

    <p>Feedback and suggestions are always welcome: <a href="mailto:[email protected]">[email protected]</a>.</p>


    <h2>Legal</h2>
    <p>Pretty How Type is released into the public domain. No rights reserved. It is named for the E. E. Cummings poem, "<a href="http://www.poets.org/viewmedia.php/prmMID/15403">[anyone lived in a pretty how town]</a>".</p>

    <p>Default reset code based on <a href="http://meyerweb.com/eric/tools/css/reset/">Reset Reload</a> by Eric Meyer</p>


</article>

</body>

About

A readability-focused CSS typography framework with strong vertical rhythm.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published