July 21, 2008

Web typography explained

Posted by: {authorName}

Most online readers don’t read line by line; instead they scan from one point to another. For this reason, designers create typographic contrast and flow by emphasising certain text. Contrast is important because not all content within a page have the same value; some have greater significance than others.


By creating contrast, you can direct the reader’s attention to the important messages, and at the same time enhance the visual appearance of a certain website.


Here are seven basic methods on how to create typographic contrast:



Larger font size indicates higher priority because it draws a reader’s attention. This method is therefore commonly applied to headings. On the other hand, you can de-emphasise by using smaller font size.



Contrast can be achieved by mixing different typeface classifications. However, due to limited web safe fonts, there are only two main classifications commonly used: serif and sans-serif. Generally, to create a contrast between the headings and the body text, designers use serif font for the headings and sans-serif font for the body, or vice versa.


If you want to go beyond the web safe fonts, there are two more options:

   1. CSS image replacement, that is to use CSS to hide the text and replace with a background image.
      [css + bg image = static graphic img]
   2. sIFR (Flash replacement), that is to use Javascript and Flash technology to replace the text with the embedded font.
      [Javascript+Flash = any font dynamically]


Note: CSS image replacement or sIFR is not practical for long paragraph, so they are normally used for headings.



Colour contrast is a common way to distinguish between navigation, headings, links, and body text. You can use faded color to indicate that something is disabled or unavailable. Sometimes you don’t need to make something bigger to get more attention, therefore you can create emphasis by using a brighter color, such as red.


You can also use color to distinguish individual words within a group of text. When small font size combined with lighter tone color, the importance of the text is further de-emphasised.



When the same typeface is used for the headings and body text, contrast can be established by changing the case. Uppercase tends to get more attention than lowercase, therefore it is more suitable for headings. The CSS property to transform text to uppercase is text-transform: uppercase.


Tips: avoid using uppercase in the body text or in long sentence because it will reduce readability.



One of the common mistakes made by most editors (particularly Microsoft Word users), is the tendency to use the underline decoration to emphasise certain text. This is a big mistake in web typography. Readers will misinterpret the underlined text as a link because the browser underlines the link by default. So, do NOT underline any text that is not a link when posting on the web. Instead, you can use italic font style.



Making certain text a heavier weight (bold or strong) can also create emphasis. Another common mistake is that people tend to bold the entire line of text. By doing so, the emphasis/contrast of the text is lost.



Space plays the most important part in maintaining flow of your design. Good use of space will tell the reader where to start, when to pause, where it ends, and what to do next. There are various ways to create space:

    * Block break (padding or margin) is the space in between the block elements.

    * Paragraph break (padding or margin) is the space created after the element.

    * Tracking (letter-spacing) is the space in between the characters.

    * Leading (line-height) is the space in between the lines.

    * Indentation (padding or margin) is commonly used for blockquote and list elements.

Posted by: KAYWEB Staff

When searching content using keywords, I have noticed some programmers still use the "LIKE %keyphrase%" technique.


This is not the best way to go about it since the user will achieve optimal results by limiting the words in his/her keyphrase to one. Additionally, if multiple words are submitted, the results returned are relevant only to the keyphrase as a whole rather than to the words within the phrase itself, thus the user is returned less results, if any at all... not to say the results would not be ordered by relevance.


The solution for this is to employ Boolean Full-Text Searches.

MySQL can perform boolean full-text searches using the IN BOOLEAN MODE modifier:


SELECT * FROM articles WHERE MATCH (title,body) 

| id | title                 | body                                |
|  1 | MySQL Tutorial        | DBMS stands for DataBase ...        |
|  2 | How To Use MySQL Well | After you went through a ...        |
|  3 | Optimizing MySQL      | In this tutorial we will show ...   |
|  4 | 1001 MySQL Tricks     | 1. Never run mysqld as root. 2. ... |
|  6 | MySQL Security        | When configured properly, MySQL ... |


The + and - operators indicate that a word is required to be present or absent, respectively, for a match to occur. Thus, this query retrieves all the rows that contain the word “MySQL” but that do not contain the word “YourSQL”.



In implementing this feature, MySQL uses what is sometimes referred to as implied Boolean logic, in which

·         + stands for AND

·         - stands for NOT

·         [no operator] implies OR


Boolean full-text searches have these characteristics:

·         They do not use the 50% threshold.

·         They do not automatically sort rows in order of decreasing relevance. You can see this from the preceding query result: The row with the highest relevance is the one that contains “MySQL” twice, but it is listed last, not first.

·         They can work even without a FULLTEXT index, although a search executed in this fashion would be quite slow.

·         The minimum and maximum word length full-text parameters apply.

·         The stopword list applies.


The boolean full-text search capability supports the following operators:

·         +

A leading plus sign indicates that this word must be present in each row that is returned.

·         -

A leading minus sign indicates that this word must not be present in any of the rows that are returned.

Note: The - operator acts only to exclude rows that are otherwise matched by other search terms. Thus, a boolean-mode search that contains only terms preceded by - returns an empty result. It does not return “all rows except those containing any of the excluded terms.

·         (no operator)

By default (when neither + nor - is specified) the word is optional, but the rows that contain it are rated higher. This mimics the behavior of MATCH() ... AGAINST() without the IN BOOLEAN MODE modifier.

·         > <

These two operators are used to change a word's contribution to the relevance value that is assigned to a row. The > operator increases the contribution and the < operator decreases it. See the example following this list.

·         ( )

Parentheses group words into subexpressions. Parenthesized groups can be nested.

·         ~

A leading tilde acts as a negation operator, causing the word's contribution to the row's relevance to be negative. This is useful for marking “noise” words. A row containing such a word is rated lower than others, but is not excluded altogether, as it would be with the - operator.

·         *

The asterisk serves as the truncation (or wildcard) operator. Unlike the other operators, it should be appended to the word to be affected. Words match if they begin with the word preceding the * operator.

If a stopword or too-short word is specified with the truncation operator, it will not be stripped from a boolean query. For example, a search for '+word +stopword*' will likely return fewer rows than a search for '+word +stopword' because the former query remains as is and requires stopword* to be present in a document. The latter query is transformed to +word.

·         "

A phrase that is enclosed within double quote (“"”) characters matches only rows that contain the phrase literally, as it was typed. The full-text engine splits the phrase into words, performs a search in the FULLTEXT index for the words. Prior to MySQL 5.0.3, the engine then performed a substring search for the phrase in the records that were found, so the match must include non-word characters in the phrase. As of MySQL 5.0.3, non-word characters need not be matched exactly: Phrase searching requires only that matches contain exactly the same words as the phrase and in the same order. For example, "test phrase" matches "test, phrase" in MySQL 5.0.3, but not before.

If the phrase contains no words that are in the index, the result is empty. For example, if all words are either stopwords or shorter than the minimum length of indexed words, the result is empty.


The following examples demonstrate some search strings that use boolean full-text operators:

·         'apple banana'

Find rows that contain at least one of the two words.

·         '+apple +juice'

Find rows that contain both words.

·         '+apple macintosh'

Find rows that contain the word “apple”, but rank rows higher if they also contain “macintosh”.

·         '+apple -macintosh'

Find rows that contain the word “apple” but not “macintosh”.

·         '+apple ~macintosh'

Find rows that contain the word “apple”, but if the row also contains the word “macintosh”, rate it lower than if row does not. This is “softer” than a search for '+apple -macintosh', for which the presence of “macintosh” causes the row not to be returned at all.

·         '+apple +(>turnover'

Find rows that contain the words “apple” and “turnover”, or “apple” and “strudel” (in any order), but rank “apple turnover” higher than “apple strudel”.

·         'apple*'

Find rows that contain words such as “apple”, “apples”, “applesauce”, or “applet”.

·         '"some words"'

Find rows that contain the exact phrase “some words” (for example, rows that contain “some words of wisdom” but not “some noise words”). Note that the “"” characters that enclose the phrase are operator characters that delimit the phrase. They are not the quotes that enclose the search string itself.


For more information, feel free to visit these links:

Posted by: {authorName}

Have you ever tried importing large MySQL backup files via PHPMyAdmin? If yes, you would probably have experienced timeout errors, and PHPMyAdmin will tell you to reload the page... but the same thing happens again.


Solution is use the mysql command line to restore your backup files.


Here's the command:

mysql --user=myuser mydatabase < mybackupfile.sql


You would be surprised at how fast your backup file is restored!