Guides and Sample Code


Apple News Format: Design Tutorial

On This Page

Default, Role-Specific Text Styles

Earlier in this tutorial, you learned that a role is a property that conveys a component’s semantic value and function in the article, such as body or photo.

A default, role-specific text style applies to all components that have a certain role. For example, a heading1 default text style can dictate the font size for all components with a role of heading1, and therefore the font size of all first-level headings in your article. Default, role-specific text styles allow you to edit a style in one place and propagate that change to all components with the same role.

A default, role-specific text style is an object that is located within the componentTextStyles property, and it must have the name default-<role>, where <role> is a valid role name. For example, default-body is the name of the default text style for body components. For a list of valid role names, see Components Overview in the Apple News Format Reference. Like the article’s default text style, a role-specific style is a component text style object, because it determines the text style for one or more entire components.

The image below demonstrates a body component rendered in Apple News. In this case, the default-body component text style object might have properties defined that include fontName, fontSize, paragraphSpacingBefore, and paragraphSpacingAfter. On the next page, you’ll learn how to include a drop cap like the one in the image.

image: ../Art/body_2x.png

JSON Example: default-body Text Style

Add an object that defines a default, role-specific text style for components with the body role. Within the component text style object, specify a font name and spacing before and after paragraphs. This style will be applied to all body components in the article.

Example Code

Ellipses (...) indicate lines of code that have been omitted from this example.

  1. {
  2. ...
  3. "componentTextStyles": {
  4. ...
  5. "default-body": {
  6. "fontName": "IowanOldStyle-Roman",
  7. "paragraphSpacingBefore": 12,
  8. "paragraphSpacingAfter": 12
  9. }
  10. }
  11. ...
  12. }

JSON Example: More Default Role-Specific Text Styles

Add objects that define default text styles for the title, intro, byline, heading1, and heading2 roles. In these component text style definitions, include properties such as font name, text color, and tracking. “Tracking” here refers to additional horizontal spacing between letters, as a percentage of the font size. Adding tracking is often a good idea if a single line of text is unlikely to take up the full available width, such as in a heading or a byline. In such a case, tracking can improve readability without sacrificing any vertical space as it might in a multi-line component.

Example Code

Ellipses (...) indicate lines of code that have been omitted from this example.

  1. {
  2. ...
  3. "componentTextStyles": {
  4. ...
  5. "default-title": {
  6. "fontName": "DINAlternate-Bold",
  7. "fontSize": 42,
  8. "lineHeight": 44,
  9. "textColor": "#53585F"
  10. },
  11. "default-intro": {
  12. "fontName": "DINAlternate-Bold",
  13. "fontSize": 18,
  14. "lineHeight": 22,
  15. "textColor": "#A6AAA9"
  16. },
  17. "default-byline": {
  18. "fontName": "DINAlternate-Bold",
  19. "fontSize": 15,
  20. "lineHeight": 18,
  21. "textColor": "#53585F"
  22. },
  23. "default-heading2": {
  24. "fontName": "DINAlternate-Bold",
  25. "tracking": 0.05,
  26. "textColor": "#53585F"
  27. },
  28. "default-heading1": {
  29. "fontName": "DINAlternate-Bold",
  30. "tracking": 0.12,
  31. "textColor": "#53585F"
  32. }
  33. }
  34. ...
  35. }

Further Exploration

At any time, you can try changing property values in your article.json file, and then use News Preview to see how these changes impact the look of your article.

For example, try changing the color of your article’s heading2 components:

  1. In your code, find the default-heading2 component text style object.

  2. In default-heading2, find the textColor property.

  3. Replace the value of the textColor property, "#53585F", with a hexadecimal color value of your choice.

  4. Preview your article.json file in News Preview. See also: Updating Your Article Preview.

    All second-level headings in your article now use the new color that you chose.