H1 - hlavní nadpis stránky

U většiny stránek je vhodné na úvod umístit tzv. perex - úvodní text, který shrnuje obsah stránky, co přináší. Je vhodné být stručný, text by neměl být delší než čtyři pět řádků. Tento wireframe definuje některá pravidla definuje některá pravidla pro správu textového obsahu a slouží grafikovi a kodérovi k tomu, aby mohli připravit sadu typografických pravidel pro projekt.

H2 - podnadpis druhé úrovně

Další text musí být členěn na kratší obsahové bloky - odstavce. Příliš dlouhé bloky se obtížně čtou. Krátké úseky textu členěné pomocí podnadpisů lze rychle "skenovat" pohledem, pro vyhledání konkrétní požadované informace. V text mohou být krátké části zvýrazněné vytučněním nebo delší části textu zvýrazněné kurzívou. V textu také může být umístěný hypertextový odkaz , který by měl být být odlišen barevně nebo vytučněním, a určitě podrtžením. Doporučuje se odkaz zvýraznit ještě při přejezdu kurzorem vizuální změnou, například změnou barvy.

„Kurzívu můžete použít také v citacích nebo v případě, že potřebujete část textu zvýraznit. Kurzívu můžete použít také v citacích nebo v případě, že potřebujete část textu zvýraznit lorem ipsum doloremque.“

Vkládání obrázků do textu - ilustrační obrázky je vhodné vkládat menší (Na desktopu 1/3 nebo 1/2 stránky a text nechávat obtékat. V mobilu a v tabletu obrázek přes celý blok, maximalní velikost doporučujeme nastavit na 460 px a vycentrovat.). Obsahové obrázky nesoucí důležité informace, například grafy, technické výkresy, je vhodné vkládat přes celou plochu stránky. Nicméně vždy je vhodné myslet na celkovou velikost - žádný vkládaný obrázek by neměl být na stránce vyšší, než je výška viewportu - pro prohlížení obrázku není vhodné scrolovat stránkou. Obrázek, který by toto pravidlo porušoval, je nutné při vkládání zmenšit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt diam eget diam fermentum, rutrum pulvinar risus vulputate. Integer finibus faucibus nisi, eget dapibus velit posuere nec. Morbi iaculis nulla et nunc efficitur pellentesque. Cras eget purus blandit quam iaculis posuere. Donec ligula ipsum, eleifend non neque id, pharetra tempus tellus. Etiam lobortis hendrerit sapien nec auctor. Morbi lacinia tincidunt tincidunt. Aliquam ligula lacus, lobortis sed nulla eget, eleifend eleifend est. Donec interdum aliquam quam, a gravida tellus semper in. Etiam finibus sapien dolor, nec ultrices sapien gravida vitae. Curabitur ullamcorper urna eu faucibus maximus. Curabitur ullamcorper urna eu faucibus maximus.

Obrázek může mít popisek

H3 - podnadpis třetí úrovně

Grafika a administrace musí umožnit vkládání textových seznamů. Odrážkovaných i číslovaných, a to včetně zanořených podseznamů. V návrhu grafiky je nutné dát pozor na to, aby v případě seznamů odkazů bylo v dotykových zařízeních (mobil, tablet) dostatečné odsazení jednotlivých řádků - tak aby i silný prst při tapnutí klikl vždy jen na jeden řádek, nikoli na více najednou. Bohužel nástroj Axure, který používáme na návrh wireframů neumožňuje dobře stylovat typografii, proto následující ukázka práce s číslovanými a nečíslovanými seznamy není typograficky dokonalá. Grafik by měl ale tut část typograficky správně navrhnout a kodér následně připravit k realizaci v CSS.

Zkouška nečíslovaného seznamu
Zkouška nečíslovaného seznamu druhá položka
Zkouška nečíslovaného seznamu třetí položka, tentokrát pěkně dlouhá, na několik řádků, abych simuloval zalamování. Tentokrát pěkně dlouhá, na několik řádků, abych simuloval zalamování. To by mohlo stačit.
- Zkouška nečíslovaného podseznamu
- Zkouška nečíslovaného podseznamu druhá položka
- Zkouška nečíslovaného podseznamu třetí položka, tentokrát pěkně dlouhá, na několik řádků, abych simuloval zalamování. Tentokrát pěkně dlouhá, na několik řádků, abych simuloval zalamování. To by mohlo stačit.

H4 - podnadpis čtvrté úrovně

Zkouška číslovaného seznamu
Zkouška číslovaného seznamu druhá položka
Zkouška číslovaného seznamu třetí položka, tentokrát pěkně dlouhá, na několik řádků, abych simuloval zalamování. Tentokrát pěkně dlouhá, na několik řádků, abych simuloval zalamování. To by mohlo stačit.
1. Zkouška číslovaného podseznamu
2. Zkouška číslovaného podseznamu druhá položka
3. Zkouška číslovaného podseznamu třetí položka, tentokrát pěkně dlouhá, na několik řádků, abych simuloval zalamování. Tentokrát pěkně dlouhá, na několik řádků, abych simuloval zalamování. To by mohlo stačit.