@mrjyn
July 9, 2011
headline helpers
'PUNK' CSS CLASS Discovered...going to get some dayglo gradient degs now!
The CLASS Attribute
The CLASS attribute is used to specify the style class to which the element belongs. For example, the style sheet may have created the punk and warning classes:
.punk { color: lime; background: #ff80c0 } P.warning { font-weight: bolder; color: red; background: white }These classes could be referenced in HTML with the CLASS attribute:
<H1 CLASS=punk>Proprietary Extensions</H1>
<P CLASS=warning>Many proprietary extensions can have negative side-effects, both on supporting and non-supporting browsers...In this example, the punk class may be applied to any BODY element since it does not have an HTML element associated with it in the style sheet. Using the example's style sheet, the warning class may only be applied to the P element.
A good practice is to name classes according to their function rather than their appearance. The warning class in the previous example could have been named red, but this name would become meaningless if the author decided to change the style of the class to a different color, or if the author wished to define an aural style for those using speech synthesizers.
Classes can be a very effective method of applying different styles to structurally identical sections of an HTML document. For example, this page uses classes to give a different style to CSS code and HTML code.
The CLASS Attribute The CLASS attribute is used to specify the style class to which the element belongs. For example, the style sheet may have created the punk and warning classes: .punk { color: lime; background: #ff80c0 } P.warning { font-weight: bolder; color: red; background: white } These class ...»See Ya
garbage
●フォントはStuffIt Expander、ZipItにて圧縮してあります。解凍してフォントファイルにしご使用下さい。
●当サイトでダウンロード出来るFONTに関してはフリーウェアです。
●フォントデータの著作権はPsychographers!に帰属します。
●個人の非営利目的でのご利用はフリーです。
使用された際の連絡や使用見本など送って頂ければありがたいです。
●法人様の営利目的での利用は応相談です。
条件により使用料を頂く場合がございますので御連絡下さい。
●無断転載、フォントファイルの改造、再配布は禁止です。
●フォントデータによって生じたいかなる結果、損害に関しては一切その責任は負いません。
via fontazilla.com Copyright(C) 2001-2007 Psychographers!/ Kou Nakamura All Rights Reserved. ●Read Meフォント利用上の注意● ●フォントはStuffIt Expander、ZipItにて圧縮してあります。解凍してフォントファイルにしご使用下さい。 ●当サイトでダウンロード出来るFONTに関してはフリーウェアです。 ●フォントデータの著作権はPsychographers!に帰属します。 ●個人の非営利目的でのご利用はフリーです。 使用された際の連絡や使用見本など送って頂ければありがたいです。 ● ...»See Ya
Kingdom Of Awesome
via kingdomofawesome.com ...»See Ya
vertigo
via fontoville.com ...»See Ya
Wikipedia "the 'pseudo'cyclopedia" Famous Typographers
Jean François Porchez (French pronunciation: [ʒɑ̃ frɑ̃swa pɔʁʃɛz]) (born in 1964) is a French type designer. He was president of ATypI (Association Typographique Internationale),
Porchez has been a visiting lecturer at the MA typeface design MATD program at the Reading University (United Kingdom) and regularly conducts type design workshops all over the world. He also contributes regularly to conferences and international publications. He published Lettres Françaises,[1] a book (in French & English) that, at the time, showed a large selection of contemporary French digital typefaces. In late 2001 he was the President of a jury set up by the Ministère de l’Éducation Nationale to select the new handwriting model and system for France and was a jury member of the 3rd Linotype Type Design Contest.
He founded the community blog and website Le Typographe,[2] dedicated to French speaking typography and typeface design.
Contents[hide] |
Awards [edit]
Porchez has received many awards. He received the Prix Charles Peignot in 1998. FF Angie (1990) & Apolline (1993) were prize-winning entries in the Morisawa typeface competition. Costa received a Certificate of Excellence in Type Design at the TDC2 2000. Ambroise, Anisette, Anisette Petite, Charente, Le Monde Journal, & Le Monde Courrier were all prize-winning entries in the Bukva:raz international competition (2001). Deréon and Mencken won Creative Review Type Awards (2006). Retiro a Certificate of Excellence in Type Design at the TDC2 2010. Retiro was selected for the Designpreis 2011 Nominee Design Award of the Federal Republic of Germany 2011. Retiro won the design prize during the 41e Palmarés of the Club des directeurs artistiques.
Typefaces [edit]
Typefaces designed by Jean François Porchez include:
|
|
References [edit]
External links [edit]
- Typofonderie
- Custom Type: Bespoke fonts by Jean François Porchez
- Blog: Chez Porchez
- Typofonderie on Facebook
- Typofonderie on Twitter
- Designing typefaces: For more reference to this biography
- The Blank sheet project for Arjowiggins on youtube
- (French) Interview détaillée
- (French) Caractère Le Monde
- (French) Site de son entreprise
- (French) Entretien avec Jean-François Porchez
- (French) Entretien vidéo de Jean-François Porchez par le Who's
Categories ( + + ) : Typographers (−) (±) (×) | Logo designers (−) (±) (×) | Graphic designers (−) (±) (×) | French graphic designers (−) (±) (×) | 1964 births (−) (±) (×) | Living people (−) (±) (×) | (+) A stub-class article from Wikipedia, the free encyclopedia (Redirected from Porchez Typofo ...»See Ya
MLCstock
via upload.wikimedia.org ...»See Ya
2010-03-03
Hello Everybody! Long time no speak!
Im having a show at KK Outlet in London tomorrow (Thursay - March 4th) - FAX EX-MACHINA. So, if you are around London, stop by. Unfortunately I wont be there, since I have to FAX the drawings from Brazil! ;) More info on KK Outlet website!
A just kicked Os Ass
via exclamachine.com ...»See Ya
fontmen
via fontsquirrel.com ...»See Ya
DOgMEaT useS OpenTypographic Features
dоgмзaтdоgиимзaT о
36 dOgMEaT 48 dOgMEaT 60 dOgMEaT 72 dOgMEaTDOgMEaT useS OpenTypographic Features
This page provides a simple, yet informative description of OpenType features along with illustrations of each OpenType feature.1ы 24 MEaTdOgdOgMEaT
Small Capitals
Small caps are often used by publishers to introduce a body of text or in headline copy. The examples below illustrate the improvement in the appearance of text when ‘true’ small capitals are used in place of ‘synthesized’ small capitals.
Swash
Swash glyphs are designed with an ornamental attachment, often based on a calligraphic model. These decorative glyphs may be used as drop capitals or in short phrases found in greeting cards or book jackets.
¿ À Â Î Ï Ô Ù Û Ü à â î ï ô ù û ü ÿ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı Œ œ Ÿ ƒ ˆ ˇ ˘ ˙ ˚ ˛ ˜ ˝ ‐ ‑ ‒ – — ― ‖ ‗ ‘ ’ ‚ “ ” „ ‚ ‛ “ ” „ ‟ † ‡ • ‣ ․ ‥ … ‧ ‰ ‱ ′ ″ ‴ ‵ ‶ ‷ ‸ ‹ › › ※ ‼ ‽ ‾ ‿ ⁀ ⁁ ⁂ ⁃ ⁄ ⁅ ⁆ ⁇ ⁈ ⁉ ⁊ ⁋ ⁌ ⁍ ⁎ ⁏ ⁐ ⁑ ⁒ ⁓ ⁔ ⁕ ⁖ ⁗ ⁘ ⁙ ⁚ ⁛ ⁜ ⁝ ⁞ € ™ ◊ fi fl fi fl ffi ffl
Contextual Swash
Swash glyphs can cause bad letter combinations. This feature substitutes a different glyph for problematic combinations.
Case Sensitive Forms
Case sensitive forms (below right) adjust their vertical position to better align with uppercase glyphs.
Capital Spacing
Capital spacing is a feature which helps improve all caps text setting. Capital letters are typically designed to combine more naturally with lowercase letters and often appear too tightly spaced in all-cap settings (top). The cpsp feature inserts a small amount of space on either side of capital letters (bottom).
Titling Case
Titling capitals (top line) are designed to be a bit more elegant in weight and proportion for setting large headlines compared to the regular text design (2nd line). Titling capitals are also useful as drop capitals (bottom left) in place of the regular design (bottom right).
Tabular Figures
Tabular lining figures are typically set as the default style of figure. ‘Tabular’ means that the figures all share the same advance width so that they will align vertically. ‘Lining’ means they optically align along a figure height line and the base line. These figures are best used in financial reporting or any place where alignment is crucial.
Proportional Figures
Proportional lining figures are not tabular and are spaced to fit together more like alphabetic glyphs. For instance the figure 1 is very narrow like the letter I. These figures are best used in text where it is not necessary for figures to be tabular.
Oldstyle Figures
Oldstyle proportional fi gures (onum) are also called ‘ranging’ figures because they range above and below the xheight and baseline. The intent is for the figures to blend in with lowercase text and not become a distraction to the reader.
Fractions
Fractions can easily be created for any numerator/denominator combination.
Scientific Inferiors, Subscript & Superscript
Inferiors, super and subscript glyphs are designed for these fonts and not synthesized by the application.
zachleat.com: CSS Sprites Using @font-face
Original Size using Embedded Font
ABCDEFGHIJKLMNOPQRST400% Size using Embedded Font
ABCDEFGHIJKLMNOPQRSTTest for :before/:after Content Trick
3 Characters should show here: BOriginal jQuery UI Icons
jQuery UI Icons using Embedded Font (and :before content trick)
CSS color: red; CSS color: blue;
Ordinals
Ordinals are properly designed (left) as opposed to synthesized (right).
Stylistic Alternates
The stylistic alternates feature allow for multiple designs for a single character. In the case of Miramonte, a more traditional two-story ‘a’ is in the font and can be used in place of the default ‘a’ (right).
Font-face Demo for the Lobster Two Font
DOgMEaT useS OpenTypographic Features
Font-face Demo for the Lobster Two Font
Lobster Two Regular - 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. 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.
Lobster Two Italic - 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. 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.
Lobster Two Bold - 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. 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.
Lobster Two Bold Italic - 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. 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.
Don't use the CSS code underlying this page. Please
Contextual Alternates
Slashed Zero
It is occasionally useful to emphasize the difference between the letter ‘O’ and the figure ‘zero’. User interfaces, financial reports and recording serial numbers are just some of the scenarios which may make use of this feature.