However, if you’re a designer, it’s essential for you to at least know the basic anatomy of type to begin using typography more effectively or at least to heighten your appreciation for the typography profession. The following are a few basic type anatomy elements you should be familiar with to advance your design career.

Character

Before diving into the various anatomy elements of type, you should be familiar with the definition of a character. A character is an individual typographic element such as a letter or a numeral. Now that you understand this basic element, we can move onto the various character anatomy elements.

Arm/Leg

The arm or leg of a character is its stroke that is attached on one end but isn’t attached on another. An arm or a leg can be horizontal such as the middle stroke extending from a lowercase “t” or diagonal such as the strokes coming from a lowercase “k.”

Cap line

A cap line is an imaginary line spanning the top of a capital character. The cap size is the distance between a character’s baseline and the cap line.

Ascender

An ascender is the upwards stem of a lower-case character that rises above the x-height. Characters with typical ascenders are h and b.

Baseline

The baseline is an imaginary line upon which all of your type characters rest. In most designs, the aim is to have all type characters in line along a baseline. However, many designers choose to break this rule with non-symmetric designs.

Descender

A descender is the portion of a lower-case character extending below the baseline. Common characters with descenders include “g” and “y.”

Sans Serif

Sans Serif fonts are characterized by their non-varying stroke widths. They are often considered more modern type options and are optimal for most online environments.

Serif

Serif fonts are characterized by their varying stroke widths and decorative elements on the end of each character. These fonts are viewed are more classic type options and are traditionally used in novels and other print reading materials.

X-height

The x-height is the middle portion of a character minus any ascenders and descenders. An easier way to determine the x-height in a string of text is to set it at the height of a lowercase “x.”

The post image is via PixelLogo

These basics type elements should help advance your appreciation for typography and the typographer’s profession. Most commonly, you can expect to use this terminology when working with a typographer on the development of a unique type for your design projects.

While learning about the anatomy of type can cause your brain to glaze over, the process doesn’t need to be so painful. By at least learning the basics of type anatomy, you’ll be a stronger designer and will sound much more knowledgeable the next time you’re conversing with a typographer.

I have collected 9 best Google Chrome extensions for twitter which i think worth the install for anyone who uses Twitter. These extensions will help you to be more productive as these are specially designed for Twitter.

1. Chromed Bird

Chromed Bird is an awesome Twitter client extension for Google Chrome with lots of features.

2. Twitter Share This Page

The easiest way to share web page on Twitter! Click the extension icon in Chrome address bar open Twitter tab with page title and page URL as a new status.

3. Power Twitter for Chrome

Power Twitter currently overlays on the twitter.com website. We use the information on the website (such as your twitter name) to identify you and build a settings profile.

4. Twitter Extender

Twitter Extender adds some necessary features to twitter.com, like old retweet style, direct message, url shorten service and lots of more.

5. TwitterWatch – Real Time Twitter Update

TwitterWatch is the simplest tool to keep watch on hot Twitter keywords! Enter a keyword, press search, and you are done. TwitterWatch can coexist with other Twitter clients, without depleting update quotas.

6. Twitter Creation Date

Displays the creation date of Twitter accounts on their profiles.

7. Twitter Plus Plus

Twitter Plus Plus allows you to answer and retweet your friends without having to go and see the page or lose the thread.

8. Twitter Photo Zoom

Adds large size preview images to your Twitter web.

9. Tweetings for Twitter

Tweetings for Google Chrome is a Twitter client extension that allows you to follow your timelines and post Tweets.

When it comes to web design, minimalism tends to be one of the most difficult styles to pull off for a lot of the online populous, though still an extremely popular one. Several among our ranks have admitted to being stumped by this approach on more than one occasion. So below, for the benefit of those tripped up on this path, are a few of the fundamentals that make this style come together effectively. That way, on your next project, you can try this approach once more with hopefully more successful results.

Nearly everyone knows the old saying less is more, but knowing it and putting it into practice are two completely different things. This is not to say that you should not be keeping this old phrase in mind as you work, just saying that even though this approach appears stylistically simple, it still requires some finesse to conquer. This should never be taken for granted.

Fundy 1: White Space

…and plenty of it. This is the first because it is the one that most people know and fall back on as the key to minimalist design. Which, for the most part, it is. White space is essential in making this style come together, but it isn’t a magic element that guarantees success. It still has to be employed in harmony with the other elements that you include in your project.

Quick Tip: Breaking Down Borders – In web design especially, we tend to box things in, throwing borders around them to cement this separation. When working for a minimal approach, you can keep your boxes, but try losing the borders around them. This helps to add to that open feeling, allowing the white space to flow through the design.

Fundy 2: Typography

Naturally you are going to want as much of a bare bones design as possible, which is going to put a bulk of the responsibility of the piece on the typography. So take steps to use extremely clean and clear fonts in your design. Ensure that the lines are sharp with no pixelation whatsoever. Scripts are also fine, as long as they are completely legible. Given the weight the type is carrying, the slightest compromise in its readability is too much.

Quick Tip: The Kerning Curve – Given that the white space is vital, keep the kerning and spacing of all of your type in mind as you put the project together. You may have to make adjustments to these typographical elements in order to maintain the uncluttered feel flowing through the design.

Fundy 3: Subtle Effects

Now with white space being a usual target for this approach many believe that this restricts them from including any other stylish elements, especially in the background. This is completely untrue. Textures, gradients, etc. are all more than welcome to enter this minimalist playing field but you want to keep them not only down to a small number, but you also want to only use them with subtlety.

Quick Tip: Mind the Balance – Anytime we design, we know that there is a balance of elements that we must maintain. However, when working in a minimalist fashion, this balance needs to be adjusted, heavily favoring the less is more mentality mentioned before. Always opt to keep it simple and down to as few added effects as possible.

Fundy 4: Clear Hierarchy

Like the typography, another area of your design that is going to have more of the brunt to bare than usual when working in minimalist arenas is the hierarchy. You need a completely clear hierarchy to be established since overall the content will be scaled down to only the most important elements. You do not want your users to suffer, and lose their way due to your approach of choice. Speaking of which, making sure that your navigation is clean and clearly visibly will assist with this.

Quick Tip: Big, Bold Headlines – To help tackle this issue, you can easily turn to the headlines used in the design. Through the use of large, commanding headers, you can visually guide your users throughout the project. Hierarchy handled.

Fundy 5: Grid Use

Now minimalism can alter some of the basic design rules, but one that remains completely unfettered is the use of the grid. The grid system is very important for minimalist design to ensure the comfort of the user. The content is already going to be out there flowing freely in ways that the users are not always used to and visually comfortable with. So do what you can to keep that comfort level in check. Employing the grid system can help.

Quick Tip: Feel Free to Think Outside the Box – Just because you are employing the grid system does not mean that you have to allow the design to still be ‘boxed in’. Get creative with the layout as much as you would like to, but for the sake of your users, keep the grid in place.

Fundy 6: Image Inclusion

Images are another element that some designers believe they have to remove from their pool of potential add-ins with this approach, but once again, this could not be further from the truth. Do not be afraid to use images to balance out the abundance of typography at all. You just have to be a bit more discerning with your choice of images. Not to mention that you need to be sure to use them sparingly.

Quick Tip: Don’t Break with the Theme – Be sure that whatever images you use, especially if they are photographs, you keep with the established minimal theme. Use images that are lightly filled and not overly cluttered in any way. Negative space based imagery works well in these instances.

The Fine Print

With those fundamentals covered and out of the way, there are still a few more pearls of minimalism wisdom left to impart. Do not mistake them as unimportant to this approach because they are not broken up into their own categories, these tips are still ones you should take away with you.

The Devil is in the Details – Detail is extremely important, all the way down to the individual pixels. When there is less clutter, any and every stray pixel stands out even more, catching the eye and distracting it from what is really important.

Necessity is the Mother of All Inclusions – Ask yourself the question, ‘is this element absolutely necessary?’, and only include those that are. It is all about serving the design, not flashing your skills. Besides, some would say it takes more skill to pull off a minimal design than it does your standard, fully loaded creation.

The Color Code – Use colors sparingly, not to mention extremely carefully. With less in the design communicating to the viewer, color tends to speak out more. So keep those associations in mind even more so than you usually would.

The Icon Connection – Do not ruin a nice minimalist design with the wrong choice of icons. Sometimes the icons that we use in our projects can almost feel like afterthoughts, as they tend to not fit as good as the rest of the elements included. Do not let that happen here. Use only clean and minimalist icons to match your design.

That is a Wrap

That tops off the discussion from this end on what to look out for as you head towards a minimalist web design project. Hopefully the post has proved helpful for any members of the community that have not had the best of luck with this approach and could not quite suss out why. Perhaps there was a point or two covered that you could put your finger on as the problem you ran into. Have you ever run into issues trying to pull off this style? What fundamentals would you have highlighted in this post?

Without this awareness of how much of our speech is ingrained in our industry, we forget when communicating with those outside said industry that they may not be following much of what we are saying. And though you do want your clients to know that you know just what it is you are talking about, you also want them to know just what it is that you are talking about. So be sure that you are familiar with which terms tend to only make sense to those in your field, to keep your client conversations on track and from veering into somewhat job-specific, proprietary directions.

General Design Terms
Typography Design Terms
Color Design Terms
Composition Design Terms
General Developing Terms
Developer Languages
Developer Content Terms
CSS Terms
Typography Developer Terms

Web Design Dictionary

We will begin in the glossary for web designers and I have broken it down into a few different categories to make it easier to swallow, if you will.

General Design Terms

Pixel – In digital imaging, a pixel (or picture element) is a single point in a raster image. The pixel is the smallest addressable screen element, it is the smallest unit of picture which can be controlled.

Resolution – describes the detail an image holds. The term applies to digital images, film images, and other types of images. Higher resolution means more image detail.

Wireframe -is a basic visual guide used in interface design to suggest the structure of a website and relationships between its pages. A webpage wireframe is a similar illustration of the layout of fundamental elements in the interface.

Typography Design Terms

Baseline – is the line upon which most letters “sit” and below which descenders extend.

Ascender – is the portion of a minuscule letter in a Latin-derived alphabet that extends above the mean line of a font. That is, the part of a lower-case letter that is taller than the font’s x-height.

Descender – is the portion of a letter in a Latin alphabet that extends below the baseline of a font. In most fonts, descenders are reserved for lowercase characters such as g, p, and y. Some fonts, however, also use descenders for some numerals.

Body Height – refers to the distance between the top of the tallest letterform to the bottom of the lowest one.

x-height – or corpus size refers to the distance between the baseline and the mean line in a typeface. Typically, this is the height of the letter x in the font…

Cap height – refers to the height of a capital letter above the baseline for a particular typeface. It specifically refers to the height of capital letters that are flat…

Overshoot – it is the degree to which capital letters go below the baseline or above the cap height, or to which a lowercase letter goes below the baseline or above the x-height.

Glyph – is an element of writing. It is a slightly vague term, but a more precise definition might be an individual mark on paper or another written medium that contributes to the meaning of what is written there. A grapheme is made up of one or more glyphs.

Character – is a unit of information that roughly corresponds to a grapheme, grapheme-like unit, or symbol, such as in an alphabet or syllabary in the written form of a natural language, such as letters, numerical digits, and common punctuation marks.

Font – (also fount) is traditionally defined as a complete character set of a single size and style of a particular typeface. For example, the set of all characters for 9-point Bulmer italic is a font, and the 10-point size would be a separate font, as would the 9-point upright.

Typeface – is a set of one or more fonts, in one or more sizes, designed with stylistic unity, each comprising a coordinated set of glyphs. A typeface usually comprises an alphabet of letters, numerals, and punctuation marks; it may also include ideograms and symbols, or consist entirely of them.

Italic – is a cursive typeface based on a stylized form of calligraphic handwriting. Due to the influence from calligraphy, such typefaces often slant slightly to the right.

Oblique – is a form of type that slants slightly to the right, used in the same manner as italic type. Unlike italic type, however, it does not use different glyph shapes; it uses the same glyphs as roman type, except distorted.

Kerning – is the process of adjusting white spacing in a proportional font. In a well-kerned font, the two-dimensional blank spaces between each pair of letters all have similar area.

Kern – is a part of a type letter that overhangs the edge of the type block.

Leading – refers to the amount of added vertical spacing between lines of type. In consumer-oriented word processing software, this concept is usually referred to as line spacing.

Ligature – occurs where two or more graphemes are joined as a single glyph. Ligatures usually replace consecutive characters sharing common components and are part of a more general class of glyphs called contextual forms…

Serif – is a typeface that contain serifs, or semi-structural details on the ends of some of the strokes that make up letters and symbols.

Sans-Serif – is a typeface that does not have the small features called “serifs” at the end of strokes.

Script – typefaces that are based upon the varied and often fluid stroke created by handwriting.

Monospaced Font – is a font whose letters each occupy the same amount of space. This contrasts to variable-width fonts, where the letters differ in size to one another.

Subscript & Superscript – is a number, figure, symbol, or indicator that appears smaller than the normal line of type and is set slightly below or above it – subscripts appear at or below the baseline, while superscripts are above.

Alignment – is the setting of text flow or image placement relative to a page, column (measure), table cell or tab. The type alignment setting is sometimes referred to as text alignment, text justification or type justification.

• Flush Left – the text is aligned along the left margin or gutter, also known as ragged right.
• Flush Right – the text is aligned along the right margin or gutter, also known as ragged left.
• Centered – text is aligned to neither the left nor right margin; there is an even gap at the end of each line
• Justified – ext is aligned along the left margin, and letter- and word-spacing is adjusted so that the text falls flush with both margins, also known as full justification.

em – is a unit of measurement in the field of typography. This unit defines the proportion of the letter width and height with respect to the point size of the current font.

em-dash – often demarcates a parenthetical thought or some similar interpolation.

en – is a typographic unit, half of the width of an em. By definition, it is equivalent to half of the height of the font.

en-dash – is usually half the width of an em dash and is commonly used to indicate a closed range (a range with clearly defined and non-infinite upper and lower boundaries) of values.

Color Design Terms

CMYK – is a subtractive color model, used in color printing, and is also used to describe the printing process itself. CMYK refers to the four inks used in some color printing: cyan, magenta, yellow, and key black.

RGB – additive color model in which red, green, and blue light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green, and blue.

Spectrum – is the portion of the electromagnetic spectrum that is visible to (can be detected by) the human eye.

Hue – is one of the main properties of a color, defined technically (in the CIECAM02 model), as “the degree to which a stimulus can be described as similar to or different from stimuli that are described as red, green, blue, and yellow,”.

Lightness & Tone – a property of a color, or a dimension of a color space, that is defined in a way to reflect the subjective brightness perception of a color for humans along a lightness–darkness axis. A color’s lightness also corresponds to its amplitude.

Tint & Shade – the mixture of a color with white, which increases lightness, and a shade is the mixture of a color with black, which reduces lightness. Mixing with any neutral color, including black and white, reduces chroma or colorfulness, while the hue remains unchanged.

Composition Design Terms

Composition – the placement or arrangement of visual elements or ingredients in a work of art, as distinct from the subject of a work. It can also be thought of as the organization of the elements of art according to the principles of art.

• Line – the visual path that enables the eye to move within the piece
• Shape – areas defined by edges within the piece, whether geometric or organic
• Color – hues with their various values and intensities
• Texture – surface qualities which translate into tactile illusions
• Form – 3-D length, width, or depth
• Value – Shading used to emphasize form
• Space – the space taken up by (positive) or in between (negative) objects

Perspective – an approximate representation, on a flat surface (such as paper), of an image as it is seen by the eye. The two most characteristic features of perspective are that objects are drawn are smaller as their distance from the observer increases and foreshortened: the size of an object’s dimensions along the line of sight are relatively shorter than dimensions across the line of sight (see later).

Contrast – the difference in visual properties that makes an object (or its representation in an image) distinguishable from other objects and the background.

Symmetry – an imprecise sense of harmonious or aesthetically pleasing proportionality and balance such that it reflects beauty or perfection.

Whitespace – often referred to as negative space, it is that portion of a page left unmarked: the space between graphics, margins, gutters, space between columns, space between lines of type or figures and objects drawn or depicted. The term arises from graphic design practice, where printing processes generally use white paper.

Web Developer Dictionary

Now we come to the Developer’s section of this massive web term glossary. Below are a plethora of definitions that should be a part of your vocabulary if you develop for the web.

General Developing Terms

CMS – A content management system (CMS) is a collection of procedures used to manage work flow in a collaborative environment. In a CMS, data can be defined as almost anything – documents, movies, pictures, phone numbers, scientific data, etc. CMSs are frequently used for storing, controlling, revising, semantically enriching, and publishing documentation.

Client Side – refers to operations that are performed by the client in a client-server relationship in a computer network. Typically, a client is a computer application, such as a web browser, that runs on a user’s local computer or workstation and connects to a server as necessary.

Server Side – refers to operations that are performed by the server in a client-server relationship in computer networking. Typically, a server is a software program, such as a web server, that runs on a remote server, reachable from a user’s local computer or workstation.

Frontend/Backend – generalized terms that refer to the initial and the end stages of a process. The front-end is responsible for collecting input in various forms from the user and processing it to conform to a specification the back-end can use. The front-end is a kind of interface between the user and the back-end.

DNS – The Domain Name System (DNS) is a hierarchical naming system for computers, services, or any resource connected to the Internet or a private network. It associates various information with domain names assigned to each of the participants. Most importantly, it translates domain names meaningful to humans into the numerical (binary) identifiers associated with networking equipment for the purpose of locating and addressing these devices worldwide.

FTP – File Transfer Protocol (FTP) is a standard network protocol used to exchange and manipulate files over a TCP/IP-based network, such as the Internet. FTP is built on a client-server architecture and utilizes separate control and data connections between the client and server applications. FTP is used with user-based password authentication or with anonymous user access.

Sitemap – a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, typically organized in hierarchical fashion. This helps visitors and search engine bots find pages on the site.

UI – the system by which people (users) interact with a machine. The user interface includes hardware (physical) and software (logical) components. User interfaces exist for various systems, and provide a means of input, allowing the users to manipulate a system, and/or output, allowing the system to indicate the effects of the users’ manipulation.

Markup Language – a system for annotating a text in a way which is syntactically distinguishable from that text. Examples include revision instructions by editors, traditionally written with a blue pencil on authors’ manuscripts, typesetting instructions such those found in troff and LaTeX, and structural markers such as XML tags.

MySQL – a relational database management system (RDBMS) that runs as a server providing multi-user access to a number of databases. The MySQL development project has made its source code available under the terms of the GNU General Public License, as well as under a variety of proprietary agreements.

PageRank – a link analysis algorithm, named after Larry Page, used by the Google Internet search engine that assigns a numerical weighting to each element of a hyperlinked set of documents, such as the World Wide Web, with the purpose of “measuring” its relative importance within the set.

RSS – RSS (most commonly expanded as “Really Simple Syndication”) is a family of web feed formats used to publish frequently updated works—such as blog entries, news headlines, audio, and video—in a standardized format. An RSS document (usually called a “feed”) includes full or summarized text, plus metadata such as publishing dates and authorship.

Root Directory – the first or top-most directory in a hierarchy. It can be likened to the root of a tree – the starting point where all branches originate.

SEO – Search engine optimization (SEO) is the process of improving the volume or quality of traffic to a web site from search engines via “natural” or un-paid (“organic” or “algorithmic”) search results as opposed to search engine marketing (SEM) which deals with paid inclusion. Typically, the earlier (or higher) a site appears in the search results list, the more visitors it will receive from the search engine. SEO may target different kinds of search, including image search, local search, video search and industry-specific vertical search engines. This gives a web site web presence.

Web Standards – a general term for the formal standards and other technical specifications that define and describe aspects of the World Wide Web. In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods.

Web 2.0 – commonly associated with web applications that facilitate interactive information sharing, interoperability, user-centered design, and collaboration on the World Wide Web. Examples of Web 2.0 include web-based communities, hosted services, web applications, social-networking sites, video-sharing sites, wikis, blogs, mashups, and folksonomies. A Web 2.0 site allows its users to interact with other users or to change website content, in contrast to non-interactive websites where users are limited to the passive viewing of information that is provided to them.

Database – a collection of data for one or more multiple uses. One way of classifying databases involves the type of content, for example: bibliographic, full-text, numeric, image. Other classification methods start from examining database models or database architectures: see below. Software organizes the data in a database according to a database model. As of 2010[update] the relational model occurs most commonly. Other models such as the hierarchical model and the network model use a more explicit representation of relationships.

Developer Languages

CSS – Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.

HTML – HyperText Markup Language, is the predominant markup language for web pages. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists etc as well as for links, quotes, and other items. It allows images and objects to be embedded and can be used to create interactive forms.

XML – XML (Extensible Markup Language) is a set of rules for encoding documents electronically. It is defined in the XML 1.0 Specification produced by the W3C and several other related specifications; all are fee-free open standards.[3]

XML’s design goals emphasize simplicity, generality, and usability over the Internet. It is a textual data format, with strong support via Unicode for the languages of the world. Although XML’s design focuses on documents, it is widely used for the representation of arbitrary data structures, for example in web services.

XHTML – XHTML (Extensible Hypertext Markup Language) is a family of XML markup languages that mirror or extend versions of the widely used Hypertext Markup Language (HTML), the language in which web pages are written. While HTML (prior to HTML5) was defined as an application of Standard Generalized Markup Language (SGML), a very flexible markup language framework, XHTML is an application of XML, a more restrictive subset of SGML. Because XHTML documents need to be well-formed, they can be parsed using standard XML parsers—unlike HTML, which requires a lenient HTML-specific parser.

PHP – PHP: Hypertext Preprocessor is a widely used, general-purpose scripting language that was originally designed for web development to produce dynamic web pages. For this purpose, PHP code is embedded into the HTML source document and interpreted by a web server with a PHP processor module, which generates the web page document.

JavaScript – an object-oriented scripting language used to enable programmatic access to objects within both the client application and other applications. It is primarily used in the form of client-side JavaScript, implemented as an integrated component of the web browser, allowing the development of enhanced user interfaces and dynamic websites.

ASP.NET – a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites, web applications and web services.

Ajax – (shorthand for asynchronous JavaScript and XML[1]) is a group of interrelated web development techniques used on the client-side to create interactive web applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages. Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not actually required, nor do the requests need to be asynchronous.

jQuery – a lightweight cross-browser JavaScript library that emphasizes interaction between JavaScript and HTML. jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plugins on top of the JavaScript library. Providing this option, developers are able to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets.

Developer Content Terms

Doctype – A Document Type Declaration is an instruction that associates a particular SGML or XML document (for example, a webpage) with a Document Type Definition (DTD) (for example, the formal definition of a particular version of HTML). In the serialized form of the document, it manifests as a short string of markup that conforms to a particular syntax.

Favicon – short for favorites icon is a 16×16 pixel square icon associated with a particular website or webpage. A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks.

Form – allows a user to enter data that is sent to a server for processing. Webforms resemble paper forms because internet users fill out the forms using checkboxes, radio buttons, or text fields. For example, webforms can be used to enter shipping or credit card data to order a product or can be used to retrieve data (e.g., searching on a search engine).

Hyperlink – a reference to a document that the reader can directly follow, or that is followed automatically. The reference points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks. Such text is usually viewed with a computer. A software system for viewing and creating hypertext is a hypertext system. To hyperlink (or simply to link) is to create a hyperlink. A user following hyperlinks is said to navigate or browse the hypertext.

robots.txt – The Robot Exclusion Standard, also known as the Robots Exclusion Protocol or robots.txt protocol, is a convention to prevent cooperating web spiders and other web robots from accessing all or part of a website which is otherwise publicly viewable. Robots are often used by search engines to categorize and archive web sites, or by webmasters to proofread source code. The standard is unrelated to, but can be used in conjunction with, Sitemaps, a robot inclusion standard for websites.

.htaccess – the default name of a directory-level configuration file that allows for decentralized management of web server configuration. The .htaccess file is placed inside the web tree, and is able to override a subset of the server’s global configuration; the extent of this subset is defined by the web server administrator.[1] The original purpose of .htaccess was to allow per-directory access control (e.g. requiring a password to access the content), hence the name.

Flash – a multimedia platform that is popular for adding animation and interactivity to web pages. Originally acquired by Macromedia, Flash was introduced in 1996, and is currently developed and distributed by Adobe Systems. Flash is commonly used to create animation, advertisements, and various web page Flash components, to integrate video into web pages, and more recently, to develop rich Internet applications. Flash can manipulate vector and raster graphics, and supports bidirectional streaming of audio and video.

CSS Terms

Span & Div – elements used where parts of a document cannot be semantically described by other HTML elements. Most HTML elements carry semantic meaning – i.e. the element describes, and can be made to function according to, the type of data contained within. For example, a p element should contain a paragraph of text, while an h1 element should contain the highest-level header of the page; user agents should distinguish them accordingly. However, as span and div have no innate semantic meaning besides the logical grouping of the content, they can be used to specify non-standard presentation or behaviour without superfluous semantic meaning.

ID & Class – The id selector is used to specify a style for a single, unique element. The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

Float – Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it. The elements before the floating element will not be affected. If an image is floated to the right, a following text flows around it, to the left.

Box Model – All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements.

Margin – The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

padding – The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.

border – The CSS border properties allow you to specify the style and color of an element’s border.

Positioning – The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element’s content is too big. Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.

Overflow – The overflow property specifies what happens if content overflows an element’s box. (visible, hidden, scroll, auto)

Z-Index – The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Typography Developer Terms

Text

• Letter-Spacing – increase or decrease the space between characters
• Line-Height – sets the distance between lines
• Text-Align – aligns the text in an element
• Text-Decoration – adds decoration to text (underline, line-through, overline)
• Text-Indent – Indents the first line of text in an element
• Text-Transform – controls the letters in an element (capitalize, uppercase, lowercase)
• Word-Spacing – increase or decrease the space between words

Font

• Font-Family – specifies the font family for the text
• font-size – sepcifies the size of the text
• font-style – specifies the style for the text (normal, italic, oblique)
• font-varient – specifies whether a text will be displayed in small caps
• font-weight – specifies the weight of a font (light, bold)

Font Stack – The font-family property specifies the font for an element. The font-family property can hold several font names as a “fallback” system. If the browser does not support the first font, it tries the next font. Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Blockquote – used to indicate the quotation of a large section of text from another source. Using the default HTML styling of most web browsers, it will indent the right and left margins both on the display and in printed form.

Once upon a time on the web, the only way to include these non-standard types, was to build them into or simply plug them in as images. Some even went so far as converting all of a site’s body text into an image, much like we do with headers. Without realizing that they were compromising the site’s SEO and search capabilities, given that the keyword rich content that generally steers people in your site’s direction was no longer searchable. Search engines saw these sites as merely images, no text to check against relevant queries. So there was a time that effective, stylish typography was a rarity on the web, but the times they are a changing!

Now as doors are starting to open for designers in the typography arena affording us more opportunities to turn to making our web designs standout through well used and styled type. Now with more people able to turn the bulk of their site’s style in more of a typographical direction, the beauty of the web is growing. However, when turning to type in this way there are some considerations to be made to make sure your type is aiding your design and not taking away from it. It is not as simple as just plugging in a font and that’s that. So below is gathering of helpful hints and resources, terms and tools, and more, to help you make the most of the typography in your web designs.

Web Safe Fonts

Web-safe fonts are fonts likely to be present on a wide range of computer systems, and used by web content authors to increase the likelihood that content will be displayed in their chosen font. If a visitor to a website does not have the specified font, their browser will attempt to select a similar alternative…

With the future of web typography and its promise of an expanding landscape through services like Typekit and developments like @Font-Face, both of which will be talked about more later in the post, web designers are hoping for a day when they will not have to concern themselves much with the issue of only having a handful of web safe fonts to work with. However, though this new day is working its way onto the horizon, that time is not quite here yet. So for the time being, designers need to be aware of what web safe fonts are currently available for use. While again, this does still have its limitations, it still allows for a bit more flexability of font choice to complete your design.

For more on web safe fonts check out dustinbrewer.com. Fonts on the web and a list of web safe fonts. This site gives you a graph of all web safe fonts as well as which OS you will find each on.

Font Stacks

Font stacks are a great use of CSS and allow desigers to expand the font options that they have at their disposal when they are building their sites. Font stacks allow you to expand upon and go a bit farther in your design than just being limited to the web-safe fonts listed above. There are a number of other fonts that most users have on their computers that can be called on by your design, and with font stacks you are able to essentially establish a font hierarchy for your design to scan through. You are basically building a virtual wishlist of font choices for your design to look for, and if the user viewing the site has those fonts stored on their machine, your code will plug the font in. And the font stacks are even stackable, so multiple stacks can be employed in one design, allowing for even more flexability.

The generic font stack is typically: Ideal, Alternative, Common, Generic which will look like the example below.

h2 {font-family: helvetica neue, helvetica, arial, sans-serif;}

Further font stack reading

The Unit Blog gives a great explanation of font stacks and the correct way to use them, as well as some sample stacks you may want to give a try in their post, Better CSS Font Stacks.

Inspiration Bit also has a really good article on font stacks that points to many must read posts on the topic. They also give you examples of a few sites with outstanding web typography, and fill you in on the font stacks that are used on them. Striking Web Sites with Font Stacks that Inspire.

Areas to Consider

Here are a few tips for you to consider on ways to make your type shine, and some of the main text areas of your site where you will want to choose your fonts carefully.

Body Text

Choosing the appropriate body text could very well be the most important part of the typography process. This is the main content of your site and if your visitors can’t read it well, they most likely won’t be back.

Headlines

Styling a great headline is one of the best ways to add a bit of flare to your site. It is not always enough to find the right font, you also need to take time to adjust the spacing, etc, to make it perfect.

While CSS image replacement and sIFR can be used for headlines, I am not going to cover them here since they are not always ideal. However, if you would like more info on both, here are some links.

• Wikipedia article on sIFR
• http://www.mikeindustries.com/blog/sifr/
• Implant sIFR3 – A Healthy Alternative to Browser Text
• Nine Techniques for CSS Image Replacement
• Is CSS Image Replacement OK for SEO?
• Using non standard fonts with CSS image replacement

Quick Tip

Combine serif & sans-serif fonts to break up the monotony of the page. For example, use one for headlines and the other for body text. Here is a great post about the mixing up of fonts. 7 Rules for Mixing Multiple Fonts in Good Web Design

BlockQuotes

Blockquotes provide a great opportunity to add some style to your page and break up long spans of text. Styling them apart from the rest of the body text, and in fact including style for them in the CSS at all, can be an effective means of highlighting certain areas of your web presentation.

Readability

Above all, the main thing to keep in mind as you reach for new ground and dare to be different with your typography, is readability. There is no point in putting words on your website if, by and large, most people will not be able to read them. Consider your fonts carefully for this reason. Maybe there is a reason no one else is using that font you are salivating to have for your design.

If there is any element that you add, or just any characters within your font family that interfere in any way with the readability of your typography choice, you may seriously want to reconsider. With so many sites populating the web, surfers are not going to take the time to try to decipher exactly what it is they are reading, they will simply move on to another site covering the same information with a much more readable presentation.

Quick Tip

Don’t underline text that isn’t a link. It’s better to use strong or em to highlight text, to help avoid any confusion for your readers.

Contrast

One area to look at when you examine readability which can impact the overall presentation, is contrast. You don’t want your readers to have to strain their eyes trying to read pale pink text and a pale blue background for one hideous example. An easy way to check for the proper contrast for your site is to look at it in grayscale. This is a sure fire way to reveal any areas where the type may not have enough contrast to be easily read.

If you can read it fine via grayscale, then chances are, your readers will not experience any issues with contrast readability either. GrayBit is an online accessibility testing tool designed to visually convert a full-color web page into a grayscale rendition for the purpose of visually testing the page’s perceived contrast.

Size

In this case, size does matter. Try not use smaller than 12-14pt type for body text. Maybe stay closer to 14 than 12 so that once again, you do not make your readers strain their eyes just to read your content. I also suggest you set your type using em instead of px so that the user can resize the font themselves to a pleasant reading size.

A List Apart has a fantastic and very in-depth article on how to reconcile the designer’s requirement for accuracy with the user’s need to resize text on demand, arriving at a best practice that satisfies designers and users and works across browsers and platforms. How to Size Text in CSS

Font Eligibility

Just because you can, does not always mean that you should. Steer clear of using all uppercase fonts for body copy. This goes back to some of the basics of design theory concerning the way we visually scan for variance between the letters in a word in order for our eyes to take it in. Using all caps has a tendency to disrupt this variant flow.

Another eligibility concern that effects readability, is also an area of contention in the design community. There are ongoing debates about which is better for the body text of a website, serif or sans-serif. IMO it is all a matter of personal preference, and so long as the readability remains uneffected, it is okay to use either.

The Size of Text Blocks

Especially with more text heavy areas of the site, you want to establish an easy flow for the type to keep from turning anyone away. Keep text blocks short and easily scannable for the sake of both your readers and your content.

Spacing

Another element of your selected font to consider, especially with regards to readability and appearance, is the spacing. For example. New Times Roman doesn’t make a great headline font until the spacing is adjusted. All around, not just between words, but between individual letters. Sometimes certain letters line up oddly next to one another in your chosen font, and it can impair the readers ability to quickly scan your words, breaking their flow. Be it for your body text or headlines, whatever the type may be for, pay attention to the spacing.

• letter-spacing – The spacing between each individual letter
• word-spacing – The space between each word
• line-height – The space between each line of type.

Use Hierarchy Effectively (h1 – h6)

There are a number of different headers that you can use in your stylesheet, six in fact. You can assign each different sizes and styles in order to steer your reader through the site. This heirarchy of the page is an important guide for the readers eyes, essentially letting them know what’s important. Use this hierarchy stylishly to the advantage of your content and design.

CSS Globe has a very helpful article listing the dos and don’ts of using headers. How to use headings in HTML.

Code Symbols Correctly

Below are the most common offences but make sure you check out this complete list of special HTML characters to make sure you are not committing any other type crimes.

• Quotes – use “ at the beginning of the quote and ” for the end.
• Apostrophe – ’
• Dashes – use – for an en dash and — for an em dash
• Elipses – …

For a Beautiful Web tells you how to improve elements such as parentheses, copyright symbols, bullets, etc using baseline shift in, Improve your web typography with baseline shift.

Future of Web Typography

We mentioned before that things are changing and options are opening up for designers as we continue to move forward. Two very important facets to that changing landscape are @Font-Face and Typekit. Hopefully these door openers will continue to expand the font base for designers in the future.

@Font-Face

At first glance @font-face seems like it would be the answers to all of our web typography prayers, by allowing you to embed the font in your design. However, the main drawback is that to use a particular font with @font-face, that font has to be licensed for @font-face linking & embedding, because the font is then available for users to download. So while this is moving us forward, the movement is still slow going. Below is a sample of the code used to embed @font-face fonts.


@font-face {
font-family: FontName; /* Define font-family name (can be anything you like) */
src: url(font.ttf); /* Point to the font file on your server */
}

body {
font-family: FontName, serif; /* Sets the uploaded font as the primary font for the site (make sure you use the name defined above) */
}


George Butler gives an in depth look at the state of @font-face along with its strengths and limitations in the post, 10 Years Later – The Current State of @Font-Face.

Theme Forest not only gives a description of @font-face but also gives a list of 15 fonts whos licenses allow for its use in, CSS @Font-Face and 15 Free Fonts You Can Use Today.

Typekit

Typekit is another way that the font well is expanding its reach for designers, though not a free one. Much like with @Font-Face, especially since it is uses the @font-face CSS, certain fonts are registered with Typekit which makes them available in your design through a CSS link to the Typekit servers if you are a subscriber.

For A Beautiful Web offers a little insight into Typekit with the post, First Impressions of Typekit.

Also be sure and check out this interview with Typekit creator Jeff Veen via Sitepoint’s Podcast #23 – Web Fonts With Jeff Veen.

Useful Tools for Web Typography

• Typetester allows you to compare three different type settings side by side.
• Typechart lets you flip through, preview and compare web typography while retrieving the CSS.
• What The Font allows you to submit an image and find the closest matches in the WTF database.
• CSS Typeset is sort of a WYSIWYG editor for type. Put in your type, select the settings you want and get the CSS automatically.
• PXtoEm offers an easy way to convert px to em.

In this post i have compiled tools and resources for php developers which will make their life easier.

1. Symfony

Symfony is a full-stack framework, a library of cohesive classes written in PHP.

Symfony Project

2. MODx

MODx helps you take control of your online content. An Open Source PHP application framework, it frees you to build sites exactly how you want and make them 100% yours.

Modx CMS

3. PHP Object Generator

PHP Object Generator, (POG) is an open source which automatically generates clean & tested Object Oriented code for your PHP4/PHP5 application.

PHP Object Generator

4. Zend Studio

Zend Studio for Eclipse combines proven capabilities to create the world’s most powerful IDE for Rich Internet Applications (RIAs).

Zend Studio

5. CakePHP

CakePHP is a rapid development framework for PHP that provides an extensible architecture for developing, maintaining, and deploying applications.

Cake PHP

6. DBG | PHP Debugger and Profiler

DBG is a a full-featured php debugger, an interactive tool that helps you debugging php scripts.

PHP Debugger

7. FirePHP

FirePHP enables you to log to your Firebug Console using a simple PHP method call.

Fire PHP Firefox Extension

8. Aukyla

Aukyla Software is an offspring of Auton Rijnsburg, specialized in software development and web services.

9. BlueShoes

BlueShoes is a comprehensive application framework and content management system. It is written in the widely used web-scripting language PHP.

Blue Shoes - PHP Framework

10. Horde Application Framework

The Horde Application Framework is a general-purpose web application framework in PHP, providing classes for dealing with preferences, compression, browser detection, connection tracking, MIME handling, and more.

11. CodeIgniter

CodeIgniter is a powerful PHP framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications

CodeIgniter - PHP framework

12. PhpOpenbiz

Want to build a data centric business application without dirty code – PhpOpenbiz (Openbiz) is the solution!

13. Qcodo

The Qcodo Development Framework is an open-source PHP 5 framework that focuses on freeing developers from unnecessary tedious, mundane coding.

14. Seagull PHP Framework

Seagull is a mature OOP framework for building web, command line and GUI applications. Licensed under BSD, the project allows PHP developers to easily integrate and manage code resources, and build complex applications quickly.

15. Zoop

PHP coding in an object oriented framework that’s ajax friendly.

Zoop Framework

16. Xaraya

Xaraya is a cutting edge open source framework (written in PHP) on which developers can create sophisticated web applications and designers enjoy considerable flexibility.

Xaraya Open Source Framework

17. SimpleTest

It is a PHP unit test and web test framework.

Simple Test - PHP Unit Testing

18. phpDocumentor

The complete documentation solution for PHP.

19. Securimage

Securimage is an open-source free PHP CAPTCHA script for generating complex images and CAPTCHA codes to protect forms from spam and abuse.

20. PIXY

Pixy is a Java program that performs automatic scans of PHP 4 source code.

21. PHP/SWF Charts

PHP/SWF Charts is a simple, yet powerful PHP tool to create attractive web charts and graphs from dynamic data.

22. WideImage

WideImage is an object-oriented library for image manipulation, written in/for PHP 5?

22. PHP_Beautifier

This program reformat and beautify PHP 4 and PHP 5 source code files automatically. The program is Open Source and distributed under the terms of PHP Licence. It is written in PHP 5 and has a command line tool.

23. Phing

It’s a project build system based on Apache Ant. You can do anything with it that you could do with a traditional build system like GNU make, and its use of simple XML build files and extensible PHP “task” classes make it an easy-to-use and highly flexible build framework.

24. HTML Purifier

HTML Purifier is a standards-compliant HTML filter library written in PHP.

HTML Purifier

25. SimplePie

SimplePie is a very fast and easy-to-use class, written in PHP, that puts the ‘simple’ back into ‘really simple syndication’.

Simple PIE

26. Koders

Koders.com, the leading search engine for open source and other downloadable code now contains over 2 billion lines of code within its repository.

Koders - Search Engine