The regularly disturb 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 thing looks very crowded this. 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, one could frame a pixel still further put down. Depending on the font, font size and line spacing, but that can swallow up too much space. Therefore, I use this on Siete no distance.
The three variants in comparison:
text-decoration: underline; border-bottom: 1px solid; border-bottom: 1px solid; padding-bottom: 1px; |
Typography
... Not so nice
Typography
... Perfect in this presentation, at small point sizes, but also touching descenders and underlining.
Typography
... For small Schriftgröen favorite playing grounds, the best choice
Although this time it's just a little but this little note from my point of view and so I start calling immediately for "beautiful underlines". Besides, there are still many more typographic sins on the Web, but to another time.
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 was the first browser 3.1 supports a method for integrating writing on websites will now follow suit Firefox 3.1 or higher. Reason enough for current and future possibilities of closer integration of Scripture to illuminate.
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 counteract this, there are three in the CSS style definition the nice "@ font-face". With this command it is possible to embed fonts directly on the site.
So, first, the writings or the desired font styles can be defined. Then, the defined font styles are used as usual in the stylesheet.
The whole thing might look like this:
@ Font-face { font-family: 'Fontin-Regular'; src: url ('Fontin-Regular.otf') format ('open type'); } 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 will be considered legal side. It can namely not at all wide fonts are stored on the server. Therefore, it recommends the usage rights for the font to be used to question exactly. Therefore, currently offer especially the fonts are sold through the Open Font license.
Conclusion:
After the whole issue 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 also some details are worthy of improvement, so is the support for @ 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 in Internet Explorer.
Related Links:
W3C definition
Comparison Safari / Firefox
Typografie.info - Font embedding in web pages
Being creative is easier said than done, because not always the ideal situation occurs and you immediately have a brilliant idea. Many a time must first be brought out their own creativity. But how to be the creative? 0815 is a tutorial on this subject and it is certainly not everyone will develop its own methods. Nevertheless, there is some help to develop ideas.
A major problem of creative people is stress and the daily business. Nothing is more difficult than developing new ideas, while the phone rings constantly and it still has several employees serve. Attempts at the beginning of a project from your everyday routine to get out - Take time to dream and to browse.
Often it is helpful to the notebook under his arm and leave the office. On a sunny day in the park it is easier to develop many ideas. Many have special favorite places to denendu are particularly creative. Be it in a sunny park, while driving or on the toilet. Everyone should decide for themselves how and where he wants to be creative. By creating an atmosphere where you feel comfortable is the "be creative" but much more easier.
Go through life with eyes open and aware to shapes, colors and patterns eighth is just as important in order to be creative. Confine yourself not only with the fact that you like something or not like it too. See subconscious I understand to judge whether something like it or not. At the same time should also be questioned what exactly pleases. A site characterized by the particular use of color, through beautiful typography, with a particularly innovative concept or special photos from?
After it is a site which has gained the attention of their own, should be elicited, so this effect comes about. With outstanding photographs could include factors influencing the effect:
Basically, it's is thus a very abstract way of seeing. The perception of individual elements of a website is essential in this. Dismembering been seen in individual components and these components arise from trying something new to make. Here, norms and conventions are ignored. In this step, it's about playing with the graphics seem to let his creativity.
What is also special about the eye-engraved object always, it should be archived. A form of archiving is to create a collection of ideas. Depending on your preference in this collection can post it with sketches, screenshots are collected by most successful pages or photographs. Such collections can be very helpful if you are stuck in a project and no longer progresses. So I do not mean that something should be an existing copy. These templates are intended only for inspiration - often a tiny enough approach to design completely new and original works. May be the starting point of a color or the fact that a site has been intensively working with lines as a stylistic device. It is therefore merely a tool to serve as a "door opener". Once this first door was opened and one is in the active design phase often runs all by itself as
Once an idea was born, it now goes to the preparation of the corresponding idea. Therefore we will consider in the next chapters individual design elements to be able to connect them to a layout template to the end.
There are numerous techniques and methods for idea generation. The following techniques provide an exemplary excerpt dar. Ultimately, however must find any suitable methods for themselves.
One of the most common and well known techniques is brainstorming. This is a method of brainstorming in the group. The goal is to get in a short time, many ideas from different points of view. Therefore it makes sense people from different areas in the group to integrate. Sun screen designers, programmers, project managers or sellers will develop into some different ideas.
In the first of two phases, after group leader has explained the problem, collect as many ideas. Here, each participant should announce his spontaneous ideas. In the best case, ideas are taken up by other group members and reinterpreted. The aim of this phase is the generation of ideas, here there is no evaluation or criticism of the individual ideas.
In phase two, the ideas are more accurately analyzed and sorted. Only at this stage it is decided which ideas are taken up or discarded.
With Mind Maps are a graphical representation of ideas. Starting from a main branch of a subject is abstracted more and more. Each "branch", is written one word. Mind Maps are an excellent starting point for example to create a sitemap.
The starting point of this technique is the largest possible data collection. Take for example a large book with pictures on the subject of a specific website. Is randomly opened a page of this picture book to come to a randomly selected image. Then attempts to derive an idea from this picture. For example, could be derived from the randomly selected image, a color scheme.
The creation of a morphological matrix is a very analytical technique. This method tries to generate as many ideas from many theoretical solutions. The first step is a matrix with as many created for the proposed product-related characteristics. An example could include features for defining a banner ad for the new product line are defined as: animation, size, aggressiveness, language
In the next step as many values to the previously defined characteristics can be defined.
For example:
Animation | no | discreetly | Intensively |
Size | Skyscraper | Full Banner | Rectangle |
Format | gif / jpg | html | Flash |
Video / Sound | no | Video | Sound |
This could then arise an idea for a skyskraper with subtle animation in Flash format with no video and no sound. This technique is well suited to work together with customers on the concept can be. After the matrix is created, the customer can very quickly get an idea of all the possible variants form and express their wishes and ideas easily.
After it has recently gone frequently to analytics and marketing, it is high time to write again an article on 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 romp 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 numbers 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 inside existing quote 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.
Quotes 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 variant of the quotes is also used in other languages such as Icelandic, Bulgarian, Romanian, Slovak, Slovenian, etc..
German alternative quotes
As an alternative in German texts frequently use the following variant. ""
This variant is often used, because this character very nicely integrated into the text and thus the text flow is not interrupted by white spaces.
The following key combinations can be generated characters:
Quotes 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
English texts in other quotes are used. Here, the mnemonic is 66-99, but both characters are shown above. At the beginning thus gives this character "and at the end of the following". The keyboard shortcuts are:
Quotes 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 quotation marks (guillemots)
Guillemots are called French quotes. Unlike the German alternative variant show the peaks inthe French variant away from the text. This yields the following characters: ""
The keyboard shortcuts are:
Quotes 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 variant of the quotes is also used in other languages such as Greek, Portuguese, Arabic, etc..
 |  |  |  |  | |||||||||||||||||||||||||||||||||||||||||||
