As you remember HTML is a markup language, but its creators wanted to improve the lives of website designers and programmers adding elements and parameters that are responsible for the appearance of the whole page including tags < font >, < b >, < i >, < bgcolor > and so on.
But at some point, the page’ code turns to be so unwieldy and unreadable that it becomes clear – this road leads “to nowhere.” Then it was decided to divide the page markup (HTML) and its visual design (CSS). Together, HTML and CSS can work wonders though you know it for sure.
The structure of the text is as important as its content. The probability that the user will not even read extremely well-written, but unformed text is very large, that’s why apply a bit of efforts to bring your articles in a readable form. What’s below are the CSS typography tools that can be used to give extra readability to your text by applying corresponding grid, font, font color etc. I hope this article will help you with this.
Typechart lets you flip through, preview and compare web typography while retrieving the CSS.
***
If you have a site heavy on text content, author thinks paying fine-grained attention to the underlying grid is important.
***
How can we use CSS for great typography in our web designs? This is a question we’ll try to answer.
***
CSS Typography: Techniques and Best Practices
This CSS typography guide will cover everything from basic syntax to best practices and tools related to CSS typography.
123456789 | @font-face { font-family: CurlzMTRegular; src: url(fonts/CurlzMTRegular.eot);}Then just use the font-family declared above with your CSS:h1, h2, h3, h4, h5, h6 { /* Always use a font stack, even with custom web fonts! */ font-family: CurlzMTRegular, Helvetica, Arial, sans-serif;} |
***
Create a Letterpress Effect with CSS Text-Shadow
***
Flexible CSS typographic scale
When designing using text, no matter if it’s for print or the Web, one vital thing to do is to ensure that the design stays harmonious in every aspect.
1234567 | paragraph = 14pxline-height = 21px (14px * 1.5)h1 = 48pxline-height * 3 = 63px font-size : 48 / 14 = 3,428571429emline-height : 63 / 48 = 1,3125em |
***
These are very simple examples of three different typographical styles. I didn’t want to go too deep into designing all content elements like lists, quotes, all the subheadings, etc.
123456789101112131415161718192021222324252627 | h1 { color: #262626; font-family: "Enriqueta", serif; font-size: 44px; line-height: 48px; margin: 0 0 30px;} h2 { color: #262626; font-family: "Enriqueta", serif; font-size: 32px; font-weight: normal; line-height: 42px; margin: 0 0 24px; padding: 12px 0 0;} h3 { color: #c73036; font-family: "Enriqueta", serif; font-size: 18px; font-weight: bold; line-height: 24px; margin: 0 0 24px; padding: 12px 0 0; text-transform: uppercase; |
***
The idea behind was instead of setting global styles for typographic elements like p, ul, ol, h1, h2, etc that you would instead apply those styles as a class, perhaps .text.
1234567891011121314151617 | .text-article { p { } ul { } ol { } h1 { } h2 { } /* etc */} .text-module { p { } ul { } ol { } h1 { } h2 { } /* etc */} |
***
How to Style Perfect Typographic Grid
This is a fascinating take on creating a CSS grid by Chris Coyier. If you’re site is text-heavy then this kind of layout might suit it perfectly. Check out the demo to see how it works.
***
CSSTYPE is a web safe typography on screen for pixel perfectionists.
***
Fillerati is a Lorem ipsum alternative having different sample texts from different books and novels. It generates random paragraphs for you to use in sample text while designing website.
***
P.S. Got something to share or say follow the red arrow…
Source : blog[dot]templatemonster[dot]com
0 comments:
Post a Comment