Ericsson R380 manual Design Components, Using Text, Font Size and Font Style

Page 9

DESIGN COMPONENTS

This chapter gives an overview of the graphical user interface components and a description of their corresponding WML elements. These items are then used when designing WAP services.

The “Look and Feel” of the components is described and guidelines are made on component usage. The WML elements and their attributes are also listed and a brief description is given.

The WML element descriptions are, supplemented with WML code as well as figures showing the way this is displayed in the browser area of the R380.

Note! The description below does not include all possible WML elements and attributes, but all elements affecting the graphical user interface.

Using Text

Font Size and Font Style

The font used in R380 is a proportional font. A proportional font gives a dynamic and minimized width for each character, which improves readability of the displayed texts. This generally allows more characters to be displayed per line.

The used typeface name is “Swiss A” and three different font sizes are used: small, normal and big.

Font size

Height

Number of lines

Small

9 pixels

7.5

Normal

10 pixels

7

Big

14 pixels

5

The normal and big fonts can be shown in either regular or bold style, the small font only in regular.

WML

The R380 browser supports all emphasis elements. The big and small elements change the font size. The em, strong, i, b and u elements are all handled in the same manner (all fonts, except small, are shown in bold).

7

Image 9 Contents
Mobile Phone R380 Design Guidelines For WAP Services Page Contents Preface Overview of ContentsWho Should Read this Guide? Related PublicationsTerminology AbbreviationsDefinitions General Usability Aspects Browser Display User Interface IssuesBrowser Area Card Title BarOn-screen Keyboard NavigatingToolbar Using Text Design ComponentsFont Size and Font Style Line Spacing and Line Breaks Text formatting exampleLine break example Paragraph example ParagraphsFieldset example Indented ParagraphsCard Title Bar Using Select ListsSingle Choice Lists MultipleMultiple Choice Lists Option elementAn example of a single choice list Using Buttons Optgroup elementAn example of a multiple choice list Label Using Input FieldsType Do exampleUsing Images ValueAn input example Src AltVspace HspaceUsing Hyperlinks An image exampleHyperlink example Using Images as Hyperlinks Using TablesAn image hyperlink example Polar Weather table example Align ColumnsPizza Penguin table example Pizza Penguin Example
Related manuals
Manual 7 pages 50.51 Kb Manual 25 pages 11.38 Kb