RSS

Archive for the 'typography'

Nicer underlining

Mar 11

Hello, Thank you for visiting - I hope that you will find useful information. Leave a comment but if you have any comments on the subject.

The regularly bother me quite ugly and not great Typographically underlining that are normally found on the web. Specifically, it bothers me that the descenders of the characters are crossed out and the whole effect urged by much. For this reason, I went over to the actually intended for this purpose and common days CSS text-decoration: underline; to boycott. I think it's much nicer than the underlining command to implement border-bottom.

For typographic point of view this is still not the optimal solution, since not meet the descenders and underlining. Therefore, the scope could still put on a pixel downwards. Depending on the font, font size and line spacing, but that can gobble up too much space. So I used on this distance Siete no.

The 3 variants in comparison:

? View Code HTML 
  text-decoration: underline;
 border-bottom: 1px solid;
 border-bottom: 1px solid; padding-bottom: 1px;

Typography

Not so nice ...

Typography

Perfect ... in this view, at small point sizes, but also touching descenders and underlining.

Typography

For small Schriftgröen favorite playing grounds ... the best choice

It's this time but only a little but this little note from my perspective and I immediately start calling for "more beautiful underlines". Apart from this there are still many more typographic sins on the Web, but to another time.

No Comments

Posted in Graphics & Design

Typography: Font Embedding on Websites

February 17

After the vexing issue of the limited font selection to websites could still be solved not complete, but at least it seems now some light at the end of the tunnel to give. After Safari 3.1 supports the first browser to integrate a method for writing websites will now follow suit Firefox from version 3.1. Reason enough, the current and future possibilities of integrating writing to shed light.

Were currently "non-standard fonts" (eg generated via PHP) mostly as images or Flash as embedded files. These workarounds work, but are optimized for search engines but not yet from the performance viewpoint. To counter this, there are three definitions in the CSS Style the nice "@ font-face". With this command it is possible to embed fonts directly on the site.

So, first, the writings and the desired font styles are defined. Then, the defined font styles are used as usual in the stylesheet.
The whole thing might look like this:

? View Code HTML 
  @ Font-face {
 font-family: 'Fontin-Regular';
 src: url ('Fontin-Regular.otf') format ("opentype");
 }

 h1 {
 font-family: 'Fontin-Bold', Georgia, serif;
 }

Basically, TrueType, OpenType, PostScript and OpenType TT fonts are supported. However, in addition to the relatively low browser support (IE lags behind wiedermal) the license legal side are observed. It may not be fact at all large fonts are stored on the server. Therefore it is recommended that the rights to use the font to be used to question exactly. Therefore, currently offer especially fonts that are available through the Open Font license.

Conclusion:
Once the whole subject had received little attention at times, again seems to be some movement came to the topic. With the release of Firefox 3.1 Firefox will have the nose slightly ahead of Safari, because Firefox will support unlike ligatures. Although these two browsers and some details could be improved, so has the support of @ font-face but a good sign. By the way, other browser manufacturers will put pressure on and sooner or later it will hopefully also support the Internet Explorer.

Related Links:
W3C definition
Compared Safari / Firefox
Typografie.info - Font embedding in web pages

No Comments

Posted in Graphics & Design

Typographically correct quotation marks

January 9

After it has recently been frequently analytics and marketing, it is high time to write again an article about typography.

The use of false quotes is arguably one of the most common typography errors. Depending on the language of the text should set the correct versions are used. On the Internet, but very often mistakenly inch marks (") quotation mark as used. This is not correct, instead, the following variants are used. Unconfirmed rumors are to be such false quotes cavort in this blog here: o) - But nevertheless I want to point out how it should be the correct way.

German quotes
In German texts are similar to the quotes the figures 99 and 66 At the beginning of a quotation mark at the bottom "and at the end of a quotation mark" set up. As an alternative variant or if quotes are used within existing quotes the simple variants of this and subsequent quotes are available (').

Once these characters on the keyboard can not be available the corresponding characters are generated via keyboard shortcuts.

Quotation marks at the beginning:
- Windows: ALT + 0132
- Mac OS: Option +

Exclamation mark at the end:
- Windows: ALT + 0147
- Mac OS: Option + 2

On Web sites is needed to correctly display the following code:
„Text“

This version of the quote is also used in other languages ​​such as Icelandic, Bulgarian, Romanian, Slovak, Slovenian, etc..

German alternative quotes
As an alternative to German texts frequently use the following variant. ""
This variant is often used because this character very nicely integrated into the text and in the text flow is not interrupted by white spaces.

The following key combinations can be generated characters:

Quotation marks at the beginning:
- Windows: ALT + 0187
- Mac OS: Shift + Option + Q

Exclamation mark at the end:
- Windows: ALT + 0171
- Mac OS: Option + Q

On Web sites is needed to correctly display the following code:
„Text“

English quotes
In English texts other quotes are used. Here, the mnemonic is 66-99, but both characters are shown above. At the beginning you get so this character, "and at the end of the following". The keyboard shortcuts are:

Quotation marks at the beginning:
- Windows: ALT + 0147
- Mac OS: Option + 2

Exclamation mark at the end:
- Windows: ALT + 0148
- Mac OS: Option + Shift + 2

On Web sites to correctly display the following code is required.
“Text”

French quotes (guillemots)
Guillemots are called French quotes. Unlike the German alternative version show the peaks inthe French version away from the text. This yields the following characters: ""

The keyboard shortcuts are:

Quotation marks at the beginning:
- Windows: ALT + 0171
- Mac OS: Option + Q

Exclamation mark at the end:
- Windows: ALT + 0187
- Mac OS: Shift + Option + Q

On Web sites is needed to correctly display the following code:
«Text »

This version of the quote is also used in other languages ​​such as Greek, Portuguese, Arabic, etc..

No Comments

Posted in Graphics & Design